全球最新的免费资源发布区
WordPress图片实现真正延迟加载-加快页面打开速度节省服务器资源
& 日 17:33 &
网页打开速度的好慢直接影响到网站的访问，大多数用户基本上不会对超过5秒钟还没有完全打开的网页产生任何好感。根据相关的研究发现，一个网站的图片太多，图片文件过大，页面太长，是导致网页打开时间过长的主要原因之一。
有人经常抱怨Wordpress网页打开速度太慢，为了提升的打开速度，我们不妨好好研究一下如何来加快网页中的图片的打开速度。 对图片太多的网页，不妨借鉴一下微博、淘宝和瀑布流主题的“按需加载”方式来加快速度。
于是就有了本文的实现文章图片真正延迟加载的主题了，它的目的就是实现在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置。对于一些图片特别多的网站，利用图片延迟加载技术可以在一定程度上减轻服务器压力。
效果之前部落也用过一段时间，不过后来发现在网速慢的情况下有看到网页上的图片实际已经全部加载完成了，然后才看到Lazy Load的渐隐效果，这样实际上是“伪延迟”，顶多给图片加了点展示的特效，实际用处不大，之后就放弃了。
这次说要的是实际真正的延迟加载，实际上仍然来源于以前的插件，只不过经过改良之后，Lazy Load插件让图片真正实现了延迟加载。更多有关于Wordpress优化加速的做法还有：
1、头像加速：
2、图片CDN：
3、服务器:
WordPress图片实现真正延迟加载-加快页面打开速度减轻服务器压力
一、Wordpress图片延迟加载准备工作
1、Lazy Load jQuery plugin地址：
1、官方网站：http://www.appelsiini.net/projects/lazyload
2、Github：/tuupola/jquery_lazyload/master/jquery.lazyload.js
2、下载并上传jquery.lazyload.js到你的网站服务器上，这是 。
3、编辑你的Header.php文件，或者是其它的能够使用JS在任意页面调用的Wordpress主题文件，放入以下代码：
&script src="/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="/grey.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的图片放在一些服务器上，或者是其它的主机空间上，以最大限度地减少图片对自身服务器的请求，同时最好是个微小的图片，例如1x1大小，这样可以保证默认图片以最短的时间加载进来，将图片加载时间降低到最低。
5、通过上面的设置，网站上所有的图片就会启用Lazy Load延迟加载技术了。
三、自动修改Wordpress文章、评论、缩略图片的IMG属性
1、 上面已经讲到，如果想要让图片实现卸载加载，则必须在IMG中设置好SRC默认值，加入data-original元素，但是实际上我们在Wordpress添加文章图片时默认的是没有这样的IMG标签的。
2、另外，对于已经存在了大量的文章图片的网站，是不可能再一篇一篇文章重新编辑修改图片的IMG属性。这时我们就可以采用Wordpress强大的过滤机制，自动将图片的IMG进行重写了。
3、将以下代码加入你的functions.php文件。代码来自：/2013/03/lazy-loading-images/
function add_image_placeholders( $content ) {&&& // Don't lazyload for feeds, previews, mobile&&& if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) )&&&&&&& return $&&& // Don't lazy-load if the content has already been run through previously&&& if ( false !== strpos( $content, 'data-original' ) )&&&&&&& return $&&& // 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 $}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 );
四、Wordpress图片延迟加载效果分析
1、通过上面的方法，我们已经将Wordpress所有的图片（文章内容图片、评论头像、缩略图片）都启用了延迟加载技术，打开网页可以看到图片的SRC值都是默认的图片地址，并加上了data-original元素。
2、当页面往下拉的时候，图片进入可视窗口中，这时就直接显示出图片了。IMG的SRC值变成了真实的图像地址了。
五、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&
六、Wordpress图片延迟加载插件：simple-lazyload
1、simple-lazyload官网：
1、插件地址：https://wordpress.org/plugins/simple-lazyload/
2、也许有人对上面如此多的JS代码已经感到“压抑”了，那么你可以使用simple-lazyload这个Wordpress图片延迟加载插件来实现上面纯代码效果：。
3、启用了simple-lazyload插件后，可以看到所有的图片（包括评论、缩略图、文章图片）的SRC值变成了默认的1像素的图片。同时写入了File元素，值为图片的真实地址。
4、将网页往下拉的时候，图片显示出来了，SRC值也变成了图片的真实地址了。
七、关于图片延迟加载的一些问题
1、如果你的程序不是Wordpress，可以使用纯代码的方法实现，如果是Wordpress，为了“懒”，可以试一试simple-lazyload插件，注意该插件可能会与其它的插件不兼容，需要自己修改一下。
2、图片延迟加载质疑一：是不是有利于加快网页的打开速度？Lazy Load 将所有的图片变成了1x1大小的图片，减少了单一网页的带宽请求，同时除了第一张默认图片是从服务器下载到本地外，其它的都是用的浏览器本地缓存，所以从理论上讲，Lazy Load 可以减轻浏览器客户端的压力，特别是对于一些图片特别多、页面特别长的网页更有效果。
3、图片延迟加载质疑二：是不是真的有利于减轻服务器负担？理论上，Lazy Load 是增加了网页中图片总请求数（多了一个默认1x1的图片请求）。但是实际情况是这样的，很多人打开一网页都是看了前面的内容就关闭了，这时延迟加载的作用就出来了，它避免了每次打开网页都把所有的图片请求完毕，加上我们把默认的图片换成外部服务器的，所以实现上Lazy Load 是有可能减轻服务器压力的。
4、图片延迟加载质疑三：是不是不利于SEO？这个问题其实比较重要，尤其是现在百度搜索排名中出现了图文和缩略图。经过测试，由于使用了&noscript&&img src=”真实地址”&&/noscript&这样的代码谷歌可以收录（实际上谷歌JS也可以读懂），但是百度这厮就不敢肯定了。理论上讲，&noscript&&/noscript&是被所有的浏览器所支持的。
文章出自：
版权所有。本站文章除注明出处外，皆为作者原创文章，可自由引用，但请注明来源。
真的，我猜你也会喜欢的：
您或许对下面这些文章有兴趣:&&&&&&&&&&&&&&&&&&&&本月吐槽辛苦排行榜
免费资源部落博客、论坛、问答和优惠网的创建者
经常混迹于各种免费资源中，尝鲜后乐于分享给他人。用WP搭建了部落博客，没事儿就折腾Wordpress，喜欢找免费空间，但只求精，稳定，耐用。有时也会介绍一点关于建站的知识和主机、服务器的使用心得与体会。PS：此人为男。
TA的专栏：&&|&&
关于本文的作者
所属分类：
链接地址：
浏览前页：
浏览后页：
部落快速搜索栏
热门点击排行榜
网站导航栏
免费资源重点推荐
最新文章推荐
部落最新评论列表
不得不看的秘密
部落本月最受关注的热点
(热度165℃) (热度98℃) (热度97℃) (热度93℃) (热度91℃) (热度75℃) (热度74℃) (热度74℃) (热度73℃) (热度69℃) (热度63℃) (热度63℃) (热度63℃) (热度60℃) (热度58℃) (热度58℃) (热度56℃)
部落本月踩得最多的宝贝
(踩12,453次) (踩7,885次) (踩5,659次) (踩5,473次) (踩4,661次) (踩4,287次) (踩3,552次) (踩3,096次) (踩2,879次) (踩2,801次)
免费资源部落，是一个致力发布和推广来自世界各地的免费资源，包括多样实用的免费空间、各种优秀的免费软件、各样可用的免费网盘等个人博客网站。站长qi是一位很普通不过的人，长期关注网络空间、互联网、软件应用、程序开发与设计、网络应用等。免费资源部落成立的目的就是希望与更多人分享网络快乐与精彩！本站持续修改完善中，如遇不便还请谅解^_^如何优化网站图片显示,加快网页加载速度-网页制作_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
如何优化网站图片显示,加快网页加载速度-网页制作
上传于||文档简介
&&如​何​优​化​网​站​图​片​显​示​,​加​快​网​页​加​载​速​度​-​网​页​制​作
大小：2.49KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢打开网页特别慢怎么回事呀、不知道是电脑的原因还是宽带的原因_百度知道
打开网页特别慢怎么回事呀、不知道是电脑的原因还是宽带的原因
）如果有人和我说cookies的问题我劝你免开尊口、打开的各种慢、、还有各个网站的按钮式的链接、但没有这回厉害!、原来也出现过这样的状况、打开的都慢、（我的网是铁通的网速慢我也知道、隔三差五的就打开的慢了比如、腾讯空间里面的那个：flash的游戏
网站不会维护！！！我电脑的东西多了、宽带我不确定？、电脑重装系统！一个一个安吗？
哪那么好装的、重装了怎么弄啊！没下载东西
提问者采纳
5;IE修复，使用多线程下载工具就受到了极大限制.360把IE修复一下.2.网上邻居 右键属性
2.之后全部确定出来。
把你的DNS修改一下、使用的浏览器有BUG、用户和网站处于不同网段、是否和系统漏洞有关，360卫士&#47！ 早日解决问题，同时打开过多页面也会出现打开网页速度慢的问题。
2.使用下面的DNS服务器地址 （输入你获取的DNS地址）
6，甚至死机：
1，也不好说。 把你的本地网络重启一下，修改成4.INTERNET 协议（TCP&#47，推荐网一VPN，严重消耗系统资源。
7，重启电脑之后再试一下 祝您成功、迅雷都是如此、网络中间设备问题;IP）双击
5，或共享上网用户中有大量下载时也会出现打开网页速度慢的问题;高级&#47，例如电信用户与网通网站之间的访问.2，也会出现打开网页速度慢的问题。
6： DNS设置方法，BT、本地网络速度太慢.常规下面选择 属性
3、访问的网站负荷太重。
4、网络防火墙的设置不允许多线程访问，尤其是蠕虫类病毒，例如多窗口浏览器的某些测试版也会出现打开网页速度慢的问题，过多台电脑共享上网.双击 本地连接
3、路由器故障等。因此。连接一个VPN代理服务器可以解决，网络修复一下.2注、虚接，百度直接搜索网一VPN 就能找到，例如目前WinXPSP2就对此默认做了限制，线路老化，打不开页面，也会出现打开网页速度慢的问题，冲击波等病毒就是通过漏洞传播并导致系统缓慢甚至瘫痪的
8、系统有病毒，程序设计不合理，带宽相对太窄：
1影响网页打开速度的因素主要有如下几方面
提问者评价
其他类似问题
为您推荐：
其他3条回答
qq空间用点心访问是最快的，建议你清理一下ie的缓存文件和垃圾文件。
如果你无下载东西情况下、打不开、有两个可能、一你要打开的网页在维护或者什么的、二是宽带的问题，有时候太多人上会很卡的，例如晚上9点到11点、三就是你电脑的问题了、从装个系统什么都没事了
你宽带是几M的
打开网页的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁