jQuery实现图片延迟加载

知更鸟 2010年3月4日14:44:20Web前端6082K170阅读模式

在浏览有些网站时,发现图片是在下拉滚动条时才加载,这是一个很不错的用户体验。这一效果是通过JavaScript 编写的 jQuery 插件实现的,它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 有些WordPress主题也具备了此功能。文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

目前我用的这个热点新闻主题由于有缩略图功能所以也试着加上看看效果如何。这里把这一功能应用到WordPress主题方法说一下,其实很简单,首先下载jquery.lazyloa.js,放到主题目录中,然后在header.php模板文件</head>标签前添加如下代码:文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

  1. <script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.js"></script>
  2. <script type="text/javascript">
  3. $(function() {
  4. $("img").lazyload({
  5. effect : "fadeIn"
  6. });
  7. });
  8. </script>

其中img是延迟加载所有图片,也可以根据不同模板作相应改动,比如我这个主题,可以改成#post img,这样只延迟加载#post 容器内的图片,否则可能影响到侧边图片的加载,主要是留言者头像可能会最后加载;文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

fadeIn是图片显示效果文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

这样基本就可以了!文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

如果上面的功能可能没有达到你的要求,还有几个选项可供设置。文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

可以设置阀值来控制 灵敏度文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

  1. $(“img”).lazyload({ threshold : 200 });  

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

  1. $("img").lazyload({   
  2. placeholder : "img/grey.gif",   
  3. event : "click"  
  4. });  

还可以通过定义effect 参数来定义一些图片显示效果文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

  1. $("img").lazyload({   
  2. placeholder : "img/grey.gif",   
  3. effect : "fadeIn"  
  4. });  

事件触发加载,事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

  1. $("img").lazyload({   
  2. placeholder : "img/grey.gif",   
  3. event : "click"  
  4. });  

延迟加载图片,Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

  1. $(function() {   
  2. $("img:below-the-fold").lazyload({   
  3. placeholder : "img/grey.gif",   
  4. event : "sporty"  
  5. });   
  6. });   
  7. $(window).bind("load"function() {   
  8. var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);   
  9. });  

图片在容器里面你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

CSS文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

  1. #container {   
  2. height600px;   
  3. overflowscroll;   
  4. }  

JavaScript 代码:文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

  1. $("img").lazyload({   
  2. placeholder : "img/grey.gif",   
  3. container: $("#container")   
  4. });  

当图片不顺序排列,滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

  1. $("img").lazyload({   
  2. failurelimit : 10   
  3. });  

下载地址: source, minified or packed文章源自知更鸟-https://zmingcx.com/jquery-lazy-to-achieve-picture.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
CSS3 水平垂直居中 Web前端

CSS3 水平垂直居中

当使用top: 50%和left: 50% 是以左上角为原点,故不处于中心位置,可以用translate()实现水平垂直居中。 CSS3 水平垂直居中 translate()是css3的新特性,在不知...
animation动画复合属性 Web前端

animation动画复合属性

css3中的animation动画复合属性:name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-...
网页特效live2d看板娘 WordPress

网页特效live2d看板娘

如果喜欢给自己的网站加些花花草草,live2d看板娘就是一个不错的特效,人物会跟随你的鼠标动,超级可爱! 看板娘   将下面代码添加到网页适当位置即可。 <script src="ht...
安卓文本无法垂直居中 Web前端

安卓文本无法垂直居中

安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。目前在微信等应用都存在该问题,而在最新的移动端 Chrome 浏览器上无该问题(截止本文编写时间,微信客户端的 chro...
匿名

发表评论

匿名网友

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

确定

评论:60   其中:访客  55   博主  5
    • 朵未
      朵未 1

      这个效果不错。收藏先。

      • Joe
        Joe 1

        我决定试试看。

        • ZCMHI
          ZCMHI 1

          看起来很好,下载了用用!

          • svcoo
            svcoo 4

            如果碰到有些加载地址不存在的时候,会不会卡在那好长时间?而不加载后面的东西

            • 免费宝贝描述模板
              免费宝贝描述模板 0

              不错,支持下

              • 约定
                约定 3

                jquery.lazyload.js下载不了呀

                • vcdgf
                  vcdgf 0

                  这个不对吧 感觉是图片全部下载完了 才出了这样一个加载的效果啊

                  • 苏打粉
                    苏打粉 0

                    不知为何在本地测试完美,但在服务器上却认不出lazyload函数。

                    • dx22120
                      dx22120 1

                      下载jquery.lazyloa.js 不到

                      • dx22120
                        dx22120 1

                        放到5张的图片滚动里面 前面三张可以显示图片 后面2张 无法显示图片。
                        [img][/img]
                        请问如何解决呢?

                        img是否可以更换的css样式?

                          • dx22120
                            dx22120 1

                            @ dx22120 问题已经解决谢谢了!

                          • 无忧桌球
                            无忧桌球 3

                            学习了,并且把方法推荐给了别人

                            • hnxn_zq
                              hnxn_zq 0

                              很好,收藏了。

                              • mei
                                mei 0

                                还是不会用。。。

                                • 微小说
                                  微小说 0

                                  这个怎么用呢?具体什么样实现?

                                  • Cyan
                                    Cyan 1

                                    我按照以上方法改好了,不过好像没有特别的效果。

                                    • duola
                                      duola 0

                                      我感觉像我图片比较少的博客,就不需要这个了,否则为了实现几张图片的延迟载入,还得引入一个巨大的js,得不偿失啊。

                                      • im
                                        im 1

                                        你的placeholder 从哪里来的 ?

                                        • im
                                          im 1

                                          莫名其妙的 settings.placeholder ?

                                          • jaclon
                                            jaclon 0

                                            一般页面比较长的才用的到

                                            • yao
                                              yao 1

                                              为什么幻灯片只能加载2张,第3张开始就不显示了??

                                              • meilailacom
                                                meilailacom 0

                                                这是我想要找的,正好要用,谢谢分享

                                                • star
                                                  star 0

                                                  你这个不兼容
                                                  http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html

                                                  • cntv720p
                                                    cntv720p 1

                                                    我的问题和前面的dx22120,是一样的,在无幻灯片的页面效果很好,但在主页幻灯片只显示前两张!!请问如何解决,谢谢,我的QQ1215691039

                                                    • kam
                                                      kam 4

                                                      我在本地测试过好像不行,不知道是否本地加载太快了,根本察觉不了还是怎样!

                                                      • 湖南特产站
                                                        湖南特产站 1

                                                        不错 很实用

                                                        • 北京海淀区游客
                                                          北京海淀区游客 0

                                                          只是幌子,完全不是延迟加载

                                                          • 电脑问题
                                                            电脑问题 3

                                                            很不错 学习了

                                                            • 百度影音电影网
                                                              百度影音电影网 3

                                                              以前使用,ABB电影网已经使用这种技术,很棒的用户体验,谢谢!

                                                              • 百度影音电影网
                                                                百度影音电影网 3

                                                                百度影音电影网采用图片延迟加载技术,很棒的用户体验。

                                                                • 昊云
                                                                  昊云 2

                                                                  不错很好!刚才测试了效果!谢谢鸟哥的分享,讲的很详细……致敬!

                                                                  • 新号外
                                                                    新号外 1

                                                                    图片延迟加载,对SEO有什么影响么?谁研究过

                                                                    • yeelone
                                                                      yeelone 0

                                                                      为什么我的测试没有效果呢?难道是如上面的兄台遇到的情况一样,本地加载的速度太快?

                                                                      • 我要建站网
                                                                        我要建站网 1

                                                                        看不懂的说啊http://www.52rong.net

                                                                        • 阿兹猫
                                                                          阿兹猫 0

                                                                          不知道帝国cms做的能不能延迟加载

                                                                          • Magento
                                                                            Magento 0

                                                                            好东西~对于流量大,图片多的网站非常试用

                                                                            • wenliao
                                                                              wenliao 0

                                                                              好东西啊,非常实用的lazyload

                                                                              • 斌果
                                                                                斌果 1

                                                                                怎么不管用

                                                                                • rin
                                                                                  rin 0

                                                                                  http://www.9958.pw/post/javascript_lazyload 参考哦

                                                                                  • lufan
                                                                                    lufan 6

                                                                                    请鸟哥看看我的网站:http://ljcnxx.sinaapp.com/,为何首页近期热门、最受欢迎、分类目录鼠标移动到上面无显示,点击也没有显示(在首页的情况下),非首页只要移动鼠标就可以显示,这是什么原因,急!!!

                                                                                      • 知更鸟
                                                                                        知更鸟

                                                                                        @ lufan 禁用所有插件试试

                                                                                          • lufan
                                                                                            lufan 6

                                                                                            @ 知更鸟 本身插件安装得就很少,全部禁用了也一样。

                                                                                          • lufan
                                                                                            lufan 6

                                                                                            @ lufan 鸟哥能帮助找到原因吗?可能很简单,就是自己不知道。

                                                                                              • 知更鸟
                                                                                                知更鸟

                                                                                                @ lufan 看你首页源代码调用了WP自带的jquery.js与主题冲突
                                                                                                有可能是某个插件自动调用造成的

                                                                                                  • lufan
                                                                                                    lufan 6

                                                                                                    @ 知更鸟 插件全部禁用也一样,试了几次,的确看到调用了jquery.js,能关闭这个调用吗?请指点,谢谢!

                                                                                                      • 知更鸟
                                                                                                        知更鸟

                                                                                                        @ lufan 主题本身未调用该文件,只能自行解决

                                                                                                • lufan
                                                                                                  lufan 6

                                                                                                  我只启用了四个插件:wordpress投稿插件、WP-Mail-SMTP、WP-PostViews、WP Cleaner。

                                                                                                  • lufan
                                                                                                    lufan 6

                                                                                                    请问鸟哥有没有方便安全的办法让WP的文章ID连续呀,我已经使用了WP Cleaner插件,清除修订和自动保存的版本后,ID仍然不连续的,清除后,数据库仍然有记录吧?

                                                                                                      • 知更鸟
                                                                                                        知更鸟

                                                                                                        @ lufan WP Cleaner是清理用的,用完删除
                                                                                                        Super Switch插件是禁止修订和自动保存的
                                                                                                        文章ID连续是不可能的,上传附件也会占ID

                                                                                                      • zousky
                                                                                                        zousky 0

                                                                                                        不错的插件,抽空试试!

                                                                                                        • monica
                                                                                                          monica 1

                                                                                                          back

                                                                                                          go

                                                                                                          ===================
                                                                                                          情况:id为box的div里面只能展示5张图。当点击按钮”go“或者”back“后,ul移动,显示其他的5张图。
                                                                                                          结果:当滚动屏幕,看到#box的时候,第一屏的图延迟加载出来了。但是点击按钮”go“或者”back“后,第二屏幕的图并没有延迟加载出来。
                                                                                                          firebug查看到的dom结果如下:头5张都有src。后面的没有。
                                                                                                          /*第一屏最后一张(第5张)*/
                                                                                                          /*第6张*/
                                                                                                          要求:请问如何实现,点击”go“或者”back”后,当前需展示的图片能延迟加载?

                                                                                                          • monica
                                                                                                            monica 1

                                                                                                            前面的代码好像被省略了。
                                                                                                            简要概述一下:一个div里面有15张图片,div里面一次只能显示5张。当点击”前进“按钮。图片列表左移,这样就能看到第6-第10图片。
                                                                                                            问题:后面的图片都没有执行延迟加载,图片看不到。因为没有src。如何解决?

                                                                                                            • andy
                                                                                                              andy 0

                                                                                                              我想知道这个功能怎么测试?,拿眼瞄吗???

                                                                                                              • 天上飞的鸟
                                                                                                                天上飞的鸟 0

                                                                                                                有人用了吗,管用吗

                                                                                                                • 氵嗳皮
                                                                                                                  氵嗳皮 1

                                                                                                                  效果很炫

                                                                                                                  • 氵嗳皮
                                                                                                                    氵嗳皮 1

                                                                                                                    BUG不滑动解锁,也可以提交评论啊

                                                                                                                    • 氵嗳皮
                                                                                                                      氵嗳皮 1

                                                                                                                      BUG不滑动解锁,也可以提交评

                                                                                                                      • 罗田在线
                                                                                                                        罗田在线 1

                                                                                                                        这个效果不错

                                                                                                                        • 借口大世界老大说
                                                                                                                          借口大世界老大说 0

                                                                                                                          :smile: 是的是的