您当前的位置： 首页 > 学无止境 > seo优化 网站首页seo优化

加快页面打开速度！WordPress图片实现真正延迟加载

发布时间：2015-07-08 16:29:32编辑：雪饮阅读（）

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

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

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

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

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

WordPress图片实现真正延迟加载-加快页面打开速度减轻服务器压力

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

1、Lazy Load jQuery plugin地址：

• 1、官方个人博客：http://www.appelsiini.net/projects/lazyload
• 2、Github：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

2、下载并上传jquery.lazyload.js到你的个人博客服务器上，这是 Lazy Load jQuery plugin下载地址（http://www.freehao123.com/dl-lazy-load-jquery-plugin/）。

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

• <script src="http://www.freehao123.com/jquery.lazyload.js" type="text/javascript">
• </script>

4、注意要将代码中的域名换你自己的，JS的路径也要相应的更改过来，如果你的Wordpress没有加载jQuery，还得自己手动添加代码加载jQuery v1.4.4+。（PS：现在的Wordpress主题应该都有加载jQuery）



5、然后在你的</head>前面加入以下JS代码，激活jquery.lazyload.js。

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

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

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

• <img src="http://upload.chinaz.com/2015/0114/1421229411630.png" data-original="xxxx/xxxx/example.jpg"  width="600" heigh="400">

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

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

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

5、通过上面的设置，个人博客上所有的图片就会启用Lazy Load延迟加载技术了。

注：相关个人博客建设技巧阅读请移步到建站教程频道。