jq懒加载

原创于 2018-07-27 17:34:18 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

29 篇文章

订阅专栏

23 篇文章

订阅专栏

思路：
1，引入jq的一个懒加载插件：jquery.lazyload.js
2，不要给图片设置src属性，设置data-original=”img/p1.jpg”
3，给图片加一个默认高度：height: 300px;
4，当图片进入视口，才会自动加载

上代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <style>
        img{height: 300px;display: block;}
    </style>
</head>

<body>
    <img class="lazy" data-original="img/p1.jpg" alt="">
    <img class="lazy" data-original="img/p2.jpg" alt="">
    <img class="lazy" data-original="img/p3.jpg" alt="">
    <img class="lazy" data-original="img/p4.jpg" alt="">

    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.lazyload.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.lazy").lazyload({effect: "fadeIn"});
      });
    </script>
</body>

</html>