主页 > 程序开发 > JS特效 > 滚动图片延迟加载lazyload插件演示代码

滚动图片延迟加载lazyload插件演示代码

更新时间:2016-01-29 17:16  来源:电脑技术网  作者:电脑技术网  查看评论
文章目录索引
文章简介
延迟加载lazyload插件演示代码
lazyload设置提前加载
lazyload设置事件触发加载

文章简介

经常浏览网站时,特别是一个图片特别特别多的网站,如京东,淘宝或是类似一些大商城之类的网站,大家经常会看到滚动页面时,图片有些会出现延时加载的情况,这种效果一般是可以通过lazyload做到,本文就以这个为简单的演示。

延迟加载lazyload插件演示代码

lazyload演示

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>lazyload演示</title> 
  6. <script src="http://www.pc515.com/js/jquery.js"></script> 
  7. <script src="http://www.pc515.com/js/lazyload.js"></script> 
  8. </head> 
  9. <body> 
  10. <div class="pc515_demo"> 
  11. <img class="lazy" src="lazyload.gif" data-original="http://www.pc515.com/uploads/allimg/160125/1_160125234217_1.png"  width="400" heigh="400"><br /> 
  12. <img class="lazy" src="lazyload.gif" data-original="http://www.pc515.com/uploads/allimg/150824/1_150824213754_1.png"  width="400" heigh="400"><br /> 
  13. <img class="lazy" src="lazyload.gif" data-original="http://www.pc515.com/uploads/allimg/151029/1_151029000423_1.png"  width="400" heigh="400"><br /> 
  14. <img class="lazy" src="lazyload.gif" data-original="http://www.pc515.com/uploads/allimg/150816/1_150816151205_1.png"  width="400" heigh="400"><br /> 
  15. <img class="lazy" src="lazyload.gif" data-original="http://www.pc515.com/uploads/allimg/150731/1_150731142448_1.png"  width="400" heigh="400"><br /> 
  16. <img class="lazy" src="lazyload.gif" data-original="http://www.pc515.com/uploads/allimg/150815/1_150815195512_1.png"  width="400" heigh="400"><br /> 
  17. <img class="lazy" src="lazyload.gif" data-original="http://www.pc515.com/uploads/allimg/150821/1_150821132511_1.png"  width="400" heigh="400"><br /> 
  18. </div> 
  19. </body> 
  20. </html> 
  21. <script>$(".pc515_demo img").lazyload(); 
  22. </script> 

lazyload设置提前加载

  1. $(".pc515_demo img").lazyload({ threshold : 100});

电脑技术网注:一般情况下lazyload插件会在图片出现在可视屏幕时才会加载,不过这个是可以修改的,比如说提前加载,只需要设置一下threshold选项即可,以上代码就是在图片离屏幕还有100像素时就提前加载。

lazyload设置事件触发加载

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

电脑技术网注:lazyload默认是鼠标滚轮触发加载,这里也可以修改为鼠标点击(click)、鼠标移动(mouseover),当然也可以自定义事件如sporty、foobar之类的都可以。

lazyload加载特效、加载隐藏图片等有不少效果,但多数用的就以上几种,其它就不细说了。

上一篇:jq动画渐隐渐显代码演示
下一篇:没有了

有关js | 的文章推荐