WordPress Lazyload 图片延迟加载

子痕 2012/11/2013阅读 2,346 次 637字阅读2分7秒

由于本博客放的照片比较多,当打开一个页面所有的图片全部加载,不仅增加了服务器的负担,而且拖慢了网页的显示速度,对于用户体验不是很好。特别是用户点击之后又一下关闭之后,完全浪费了服务器的感情。所以考虑放延迟加载图片的插件。

这里介绍的是利用jquery.lazyload.js,其实是 jQuery 的插件实现图片延迟加载的效果,Wordpress图片会随着浏览器滚动条渐显的效果。

[warning]2013-10-14更新:
如果使用jquery.lazyload.js新的版本,则此方法已经失效。即使原来的版本的js,也不是真正的lazyload。最新的真正的lazyload请移步这里 https://www.mzihen.com/real-lazyload/

2013-11-06更新:
好多人都没耐心看到末尾的更新,我索性把更新链接提到上面来了,但这样影响了排版,只希望能帮助更多的人。
[/warning]

图片延迟加载的优缺点

延迟加载图片,提升页面加载速度
逐渐显示的效果,比较华丽优美

对于图片信息丰富的网站,特别是靠图文信息吃饭的网站,比如电子商务依赖搜索引擎比较多,延迟加载会影响到SEO。

代码下载

最新源代码 jquery.lazyload.js (8.12 kb)
网上也有以前的版本,只有1.58kb

代码安装

jquery.lazyload.js 是 jQuery 的插件,所以必须先载入jQuery,现在一般皮肤都会用到jQuery。没有的同学可以在 之间插入如下代码:

然后在插入这段代码:



保存修改。

其中jquery.lazyload.js和loading.gif是放在对用的皮肤目录下的,路径一般是 /wp-content/themes/某某皮肤/

其它设置应用

1、用图片提前占位 placeholder : "img/grey.gif", 参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏。
2、载入使用何种效果 effect : "fadeIn", 参数:effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn。
3、提前开始加载 threshold : 200, 参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉。
4、事件触发时才加载 event : "click", 参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
5、对某容器中的图片实现效果 container: $("#container"), 参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片。
6、图片排序混乱时 failurelimit : 10, 参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题。

其它拓展阅读

mg12 Lazy Load, 延迟加载图片的 jQuery 插件

  • 本文由 发表于 2012/11/20
  • 转载请务必保留本文链接:https://www.mzihen.com/wordpress-lazyload-js/
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:13   其中:访客  11   博主  0   引用   2
    • Louis Han Louis Han 6

      好吧,我一个页面40+张图,多不多?

      • Junan Junan 4

        有些主题都自带这个功能了。延迟也好,多图打开会快很多。哈哈

          • 子痕 子痕 9

            @ Junan @Junan  嗯那,速度上去了哈,体验好了些~不过图片暂时还比不了楼上的!

          • Likecer Likecer 1

            Lazyload这名字起得形象

            • Sam Sam 3

              刚刚搞定了一些lazyload~~目测你现在的lazyload跟我之前一样~~都是伪Lazyload~是已经加载暂缓显示~~Firebug可以很清楚显示。。你得改一下图片前缀。。。。

                • 子痕 子痕

                  @ Sam @Sam : 文章的lazy load应该是真的吧?
                  我主题用的自带的lazy load,如果真如你所说,回头我改改~

                • bloodface bloodface 1

                  你这个不能用是吧。是伪lazy?

                    • 子痕 子痕

                      @ bloodface @bloodface : 这篇文章是以前写的,确实是伪lazyload,真正的lazyload我已经重新写了篇文章,并将链接放到这篇文章的末尾处了。

                    • 魅力花果山摄影 魅力花果山摄影 1

                      这个方法不错,我有的文章多达几十张图片