图片懒加载插件lazyload的使用示例

来源：互联网发布：php开发mac应用编辑：程序博客网时间：2024/04/30 10:08
请在这里查看示例 ☞ lazyload示例
<!DOCTYPE html>  <html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">    <title>demo</title>      <script src="../js/jquery-1.11.3.min.js"></script>    <script src="js/jquery.lazyload.min.js"></script>      <style>      * {margin: 0; padding: 0;}      body,html {width: 100%; height: 100%;}      .a3 {        width: 500px; height: 400px; overflow: auto;      }      .container  {width: 9000px; height: 100px;}      img {background: url(../images/reload.gif) no-repeat center;}  </style>  </head>  <body>      <div class="a3">        <div class="container">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a1.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a2.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a3.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a4.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a1.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a2.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a3.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a4.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a1.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a2.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a3.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a4.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a1.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a2.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a3.png">            <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a4.png">        </div>      </div><script>      $(function() {          //使用了data-original就不要写src了，要不然没有效果          //在没有完全获取到图片的资源前，是得不到图片的宽高的，所以预先设置宽高，让它提前有个占位          $('.img1').lazyload({              threshold: 200,//滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉              effect: 'fadeIn',//show fadeIn slideDown              //placeholder: '',//设置加载中的占位图片路径，如image.load.gif，个人建议不设置，可以通过css设置背景图片加提前设置src=reload.gif的方式，来达到图片正在加载中的效果              container: $(".a3"),//如果是滚动某个div，一定要在这里设置          });          });</script>  </body>  </html>
0 0