为 Wordpress 自定义首页或者自定义页面添加 jQuery Lazy Load 功能

/

为 WordPress 自定义首页或者自定义页面添加 jQuery Lazy Load 功能

前面介绍过利用 jQuery Lazy Load 让 wordpress 实现图片延迟加载,从而提升站点速度,不过很多主题采用自定义首页,或者自定义页面,通过向 the_content hook 添加自定义动作的方法,很多时候无法正常工作,比如劼墨誌采用的 Genesis 框架的主题。下面的代码对缓冲区进行控制,可以在任何自定义首页或者自定义页面上实现 jQuery Lazy Load 功能。

add_action( 'wp_enqueue_scripts', 'my_register_scripts', 100 );
function my_register_scripts(){
    wp_register_script( 'jquery_lazyload', 'path_to_jquery.lazyload.min.js' );
    wp_enqueue_script( 'jquery_lazyload', 'path_to_jquery.lazyload.min.js', array( 'jquery' ));
}

add_action('wp_head', 'lazyload_js');
function lazyload_js(){
    echo '<script type="text/javascript">jQuery(document).ready(function ($){$("img").lazyload({effect:"fadeIn"});});</script>';
}

function callback($buffer) {
    $buffer = preg_replace('/src=[\'"](.*?)[\'"]/','src="/wp-content/themes/magazine/images/grey.gif" data-original="\1"', $buffer);
    return $buffer;
}
function buffer_start() { ob_start("callback"); }
function buffer_end() { ob_end_flush(); }
add_action('wp_head', 'buffer_start');
add_action('wp_footer', 'buffer_end');

拓展一下,很多主题的自定义首页会采用 Slider(滑块),可以对该部分禁用 jQuery Lazy Load,以避免该部分出现大的灰色方块图片,影响视觉效果。下面仅以我的 Genesis 框架主题为例。

function callback($buffer) {
    if (is_home()){
        preg_match('/(?<=<div id="slides">)[\s\S]*?(?=<div class="myController">)/', $buffer, $out);
        $tmp = $out[0];
        $buffer = str_replace($out[0], 'PROTECTED-CONTENT', $buffer);
        $buffer = preg_replace('/src=[\'"](.*?)[\'"]/','src="/wp-content/themes/magazine/images/grey.gif" data-original="\1"', $buffer);
        $buffer = str_replace('PROTECTED-CONTENT', $tmp, $buffer); 
    }
    else{
        $buffer = preg_replace('/src=[\'"](.*?)[\'"]/','src="/wp-content/themes/magazine/images/grey.gif" data-original="\1"', $buffer);
    } 
    return $buffer;
}
function buffer_start() { ob_start("callback"); }
function buffer_end() { ob_end_flush(); }
add_action('wp_head', 'buffer_start');
add_action('wp_footer', 'buffer_end');

Comments