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

最新推荐文章于 2024-03-25 10:01:53 发布

vcxiaohan2

最新推荐文章于 2024-03-25 10:01:53 发布

阅读量4.5k

点赞数

分类专栏： jQuery插件

本文链接：https://blog.csdn.net/u011500781/article/details/50994333

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

请在这里查看示例 ☞ 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>

vcxiaohan2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载插件lazyload的使用示例

test * {margin: 0; padding: 0;} body,html {width: 100%; height: 100%;} .container {width: 3000px; height: 300px;} img {background: url(images/load.gif) no-repeat center;}
复制链接

扫一扫