首页 > Web开发 > 详细

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

时间:2017-08-31 17:50:54      阅读:295      评论:0      收藏:0      [点我收藏+]

在写代码的时候,经常会用到懒加载的模式,以前是通过window.onload的模式去加载,但是图片很多或者用ajax请求的时候,就会很麻烦,现在用lazyload的模式加载方便很多

技术分享

技术分享

技术分享

技术分享

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Lazy Load Enabled</title>

<!--[if lt IE 9]>

    <script src="html5shiv.js"></script>

<![endif]-->



</head>



<body>







<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">

<img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">

<img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">

<img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">

<img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">

<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">













<script src="jquery-1.11.0.min.js"></script>

<script src="jquery.lazyload.js?v=1.9.1"></script>



<script type="text/javascript" charset="utf-8">

  $(function() {

      $("img.lazy").lazyload({effect: "fadeIn", placeholder : "img/grey.gif"});

  });

</script>



</body>

</html>

  

<img data-original="../img/banner.png" class="lazy" src="../img/loading.gif">


 //图片懒加载
      $("img.lazy").lazyload({effect: "fadeIn", placeholder : "../img/loading.gif"});

http://wechat.daopeng365.com/littileApple-lazy/page/index.html

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

原文:http://www.cnblogs.com/yesu/p/7459418.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!