wordpress图片延迟加载功能之lazyload加快页面打开速度节省服务器资源

网页打开速度的好慢直接影响到网站的访问,大多数用户基本上不会对超过5秒钟还没有完全打开的网页产生任何好感。根据相关的研究发现,一个网站的图片太多,图片文件过大,页面太长,是导致网页打开时间过长的主要原因之一。

有人经常抱怨Wordpress网页打开速度太慢,为了提升WordPress的打开速度,我们不妨好好研究一下如何来加快网页中的图片的打开速度。 对图片太多的网页,不妨借鉴一下微博、淘宝和瀑布流主题的“按需加载”方式来加快速度。

于是就有了本文的实现文章图片真正延迟加载的主题了,它的目的就是实现在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。对于一些图片特别多的网站,利用图片延迟加载技术可以在一定程度上减轻服务器压力。

图片延迟加载效果之前部落也用过一段时间,图片加载不过后来发现在网速慢的情况下有看到网页上的图片实际已经全部加载完成了,然后才看到Lazy Load的渐隐效果,这样实际上是“伪延迟”,顶多给图片加了点展示的特效,实际用处不大,之后就放弃了。

这次说要的是实际真正的延迟加载,实际上仍然来源于以前的Lazy Load插件,只不过经过改良之后,Lazy Load插件让图片真正实现了延迟加载。

一、Wordpress图片延迟加载准备工作

1、Lazy Load jQuery plugin地址:

  • 1、官方网站:https://www.appelsiini.net/projects/lazyload
  • 2、Github:https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

2、下载并上传jquery.lazyload.js到你的网站服务器上。

3、编辑你的Header.php文件,或者是其它的能够使用JS在任意页面调用的Wordpress主题文件,放入以下代码:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="https://www.xxx.com/wp-content/themes/xxx/js/jquery.lazyload.js"></script>
<script type="text/javascript">
jQuery(function() { 
jQuery("img").lazyload({ 
effect : "fadeIn",
failure_limit : 100 }); 
});
</script>

现在的Wordpress主题应该都有加载jQuery,如果没有加载,请像我这样加载一下,用的是cdn地址https://code.jquery.com/jquery-1.8.3.js

二、修改图片IMG标签启用迟延加载

1、Lazy Load 要求图片的IMG属性写成这样的才可以正确启用延迟加载效果。


<img src="https://www.xxx.com/grey.png" data-original="xxxx/xxxx/example.jpg"? width="600" heigh="400">

2、基本要求是:src中赋予一个1×1大小图片,data-original中写入图片的真实地址。

3、Lazy Load 延迟加载图片的原理是:打开网页时所有的图片是一个1×1大小默认图片,随着网页的拖动,Lazy Load jQuery plugin会“按需”将可视窗口内图片的src值替换成data-original的值,从而显示图片,其它的不在可视范围内的依然是被默认的图片所代替。

4、所以,建议大家将默认的src的图片放在一些免费CDN服务器上,或者是其它的主机空间上,以最大限度地减少图片对自身服务器的请求,同时最好是个微小的图片,例如1×1大小,这样可以保证默认图片以最短的时间加载进来,将图片加载时间降低到最低。

5、通过上面的设置,网站上所有的图片就会启用Lazy Load延迟加载技术了。

三、自动修改Wordpress文章、评论、缩略图片的IMG属性

1、 上面已经讲到,如果想要让图片实现卸载加载,则必须在IMG中设置好SRC默认值,加入data-original元素,但是实际上我们在Wordpress添加文章图片时默认的是没有这样的IMG标签的。

2、另外,对于已经存在了大量的文章图片的网站,是不可能再一篇一篇文章重新编辑修改图片的IMG属性。这时我们就可以采用Wordpress强大的过滤机制,自动将图片的IMG进行重写了。

3、将以下代码加入你的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/grey.png' );
 // 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 );

4、注意最后一句:add_filter( ‘the_content’, ‘add_image_placeholders’, 99 );是用来匹配Wordpress文章页面内容中的图片的。代码中的:/images/grey.png 是默认图片地址,你需要替换成你自己的。

5、如果你想让你的评论头像也实现延迟加载,请加入下列代码:

add_filter( 'get_avatar', 'add_image_placeholders', 11 );

6、有些Wordpress可能采用了timthumb 缩略图片,如果你想让你的缩略图片实现延迟加载,请加入下列代码:


add_filter( 'post_thumbnail_html', 'add_image_placeholders', 11 );

四、Lazy Load 图片延迟加载插件的高级设置

1、Lazy Load 允许自己定义图片延迟加载效果。默认情况下图片会出现在屏幕时才加载,如果你想提前加载图片, 可以设置 threshold 选项:threshold : 200 表示令图片在距离屏幕 200 像素时提前加载。

<script type="text/javascript">
 jQuery(function() {
 jQuery("img").lazyload({ 
 threshold : 200 }); 
 });
</script>

2、默认的情况下用户滚动到窗口上图片所在位置时图片就会被自动加载显示,如果你想设置为只有鼠标点击该图片或者当鼠标放在图片上时才会加载图片,可以加上click 和 mouseover事件。如下:

<script type="text/javascript">
jQuery(function() {
 jQuery("img").lazyload({? 
 placeholder : "img/grey.png",
 event : "click" }); 
 });
</script>

3、当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理,例如FadeIn是渐显特效。

<script type="text/javascript">
jQuery(function() { 
 jQuery("img").lazyload({? 
effect : "fadeIn" }); 
 });
</script>

4、有了网页的图片的布局可能会比较混乱,设置failurelimit的数字有助于我们提高插件的效率,failure_limit : 10表示插件找到 10 个不在可见区域的图片是才停止搜索,根据你的需要可以调高或者调低。

<script type="text/javascript">
jQuery(function() {
 jQuery("img").lazyload({? 
 failure_limit : 10? }); 
});
</script>

五、关于图片延迟加载的一些问题

1、图片延迟加载质疑一:

是不是有利于加快网页的打开速度?Lazy Load 将所有的图片变成了1×1大小的图片,减少了单一网页的带宽请求,同时除了第一张默认图片是从服务器下载到本地外,其它的都是用的浏览器本地缓存,所以从理论上讲,Lazy Load 可以减轻浏览器客户端的压力,特别是对于一些图片特别多、页面特别长的网页更有效果。

2、图片延迟加载质疑二:

是不是真的有利于减轻服务器负担?理论上,Lazy Load 是增加了网页中图片总请求数(多了一个默认1×1的图片请求)。但是实际情况是这样的,很多人打开一网页都是看了前面的内容就关闭了,这时延迟加载的作用就出来了,它避免了每次打开网页都把所有的图片请求完毕,加上我们把默认的图片换成外部服务器的,所以实现上Lazy Load 是有可能减轻服务器压力的。

3、图片延迟加载质疑三:

是不是不利于SEO?这个问题其实比较重要,尤其是现在百度搜索排名中出现了图文和缩略图。经过测试,由于使用了<noscript><img src=”真实地址”></noscript>这样的代码谷歌可以收录(实际上谷歌JS也可以读懂),但是百度这厮就不敢肯定了。理论上讲,<noscript></noscript>是被所有的浏览器所支持的。

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论