北极寒流 » 网络资源 » WordPress 文章图片实现真正的懒加载(Lazy Load) - 2013.09.21

WordPress 文章图片实现真正的懒加载(Lazy Load)

Lazy Load(延迟加载图片)是很多wordpress网站都会采用的一个jquery 插件,Lazy Load可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置.这可以在很大程度上优化网页打开速度,特别是一些图片较多的文章页面。具体的效果请查看Lazy Load演示页面

不过很多人也许不知道,如果不对文章图片做预处理的话,那么即使你使用Lazy Load插件,那也是一种伪懒加载,达不到优化网页的目的。如何实现真正的懒加载功能?按官网的意思,要实现图片延迟加载,需要对图片做预处理,图片img 标签必须如下面那样写:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

即将占位图片grey.gif 写在地址上(src),而真正的地址则用 data-original来引用。当Lazy Load 运行时候,便会将src 修改为data-original 的图片地址,以此达到懒加载的目的。

但如果是在WordPress 中,文章的图片要按照这个实现,必须手动修改html 代码;如果图片多,那可真是费时费力。其实我们可以利用正则表达式+WordPress 强大的过滤器机制,自动替换img 标签的代码。

将下面的代码加入到主题的functions.php 文件下:

function add_image_placeholders( $content ) {
    // Don't lazyload for feeds, previews, mobile
    if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) )
        return $content;
    // Don't lazy-load if the content has already been run through previously
    if ( false !== strpos( $content, 'data-original' ) )
        return $content;
    // In case you want to change the placeholder image
    $placeholder_image = apply_filters( 'lazyload_images_placeholder_image', get_template_directory_uri() . '/images/image-pending.gif' );
    // This is a pretty simple regex, but it works
    $content = preg_replace( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<img${1}src="%s" data-original="${2}"${3}><noscript><img${1}src="${2}"${3}></noscript>', $placeholder_image ), $content );
    return $content;
}
add_filter( 'the_content', 'add_image_placeholders', 99 );

相应的,懒加载(Lazy Load)的激活代码最好修改为以下:

jQuery("img").lazyload({
   .............//中间的代码忽略   
    });

就是默认对所有img 标签开启懒加载,不过如果你只是需要对部分图片懒加载,那么你可以按我这样设置(我是设置为(#indexpost、.post、.ds-thread标签的img采用懒加载效果)。

<script type="text/javascript" charset="utf-8">
$(function() {$("#indexpost img, .post img, .ds-thread img").lazyload({effect : "fadeIn" });}); 
</script>

发表评论 【登录·注册】

所有留言都会被审核,请勿发布垃圾评论!

(必填)*