jQuery Lazy Load - 让 wordpress 实现图片延迟加载

/

jQuery Lazy Load - 让 wordpress 实现图片延迟加载

Lazy Load 是一个 jQuery 插件,可以让您站点上的图片延迟加载,从而提升站点内容加载速度。Wordpress 有不少 Lazy Load 相关的插件,不过实现 Lazy Load 比较简单,完全可以不用插件。在主题的 functions.php 添加如下内容:

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>';
}

add_filter('the_content', 'lazyload_img');
function lazyload_img($content){
    if(is_feed()) return $content;
    else{
        $content = preg_replace('/src=[\'"](.*?)[\'"]/','src="/wp-content/themes/magazine/images/grey.gif" data-original="\1"', $content);
        return $content;
    }
}

Comments