图片懒加载(js版)

使用JavaScript实现图片懒加载

html

 1 <body>
 2     <div class="img">
 3         <img src="./loading.gif" data-lazyload="https://dpic3.tiankong.com/67/cn/QJ6226943363.jpg@!350h">
 4         <img src="./loading.gif" data-lazyload="https://dpic1.tiankong.com/zt/sg/QJ6235849453.jpg@!350h">
 5         <img src="./loading.gif" data-lazyload="https://dpic1.tiankong.com/ul/ac/QJ6479383109.jpg@!350h">
 6         <img src="./loading.gif" data-lazyload="https://dpic2.tiankong.com/1z/kb/QJ6401246638.jpg@!350h">
 7         <img src="./loading.gif" data-lazyload="https://dpic1.tiankong.com/ut/zj/QJ6634256101.jpg@!350h">
 8         <img src="./loading.gif" data-lazyload="https://dpic.tiankong.com/09/jh/QJ6635714192.jpg@!350h">
 9         <img src="./loading.gif" data-lazyload="https://dpic3.tiankong.com/6k/i5/QJ6727412259.jpg@!350h">
10         <img src="./loading.gif" data-lazyload="https://dpic2.tiankong.com/av/fc/QJ6872601378.jpg@!350h">
11         <img src="./loading.gif" data-lazyload="https://dpic.tiankong.com/37/1u/QJ7100086664.jpg@!350h">
12         <img src="./loading.gif" data-lazyload="https://dpic1.tiankong.com/jt/7l/QJ7100510973.jpg@!350h">
13     </div>
14  </body>

 

js

 1  <script>
 2     // 简单版
 3     //   //  监听滚动条事件
 4     //   $(window).on('scroll', () => {
 5     //       //  设置延时函数，防止加载过快，减轻服务器负担；为了效果明显，设置两秒延时
 6     //       setTimeout(() => {
 7     //           //  执行获取图片函数
 8     //           getImg();
 9     //       },2000);
10     //   })
11     //   ​
12     //   //  获取图片函数
13     //   function getImg() {
14     //       //  遍历图片元素
15     //       $('.img img').each((index, item) => {
16     //           //  判断每一个图片元素是否在可视区域
17     //           if($(item).offset().top <= $(window).height() + $(window).scrollTop()) {
18     //               //  把暂存器data-lazyload的值赋值给img标签的src
19     //               $(item).attr('src', $(item).attr('data-lazyload'))
20     //           }
21     //       })
22     //   }
23 
24     // 升级版
25     //  第一次加载
26     getImg();
27 ​
28     var clock; //  设置一个延时函数节流
29 ​
30     $(window).on('scroll', () => {
31         if (clock) {
32             //  如果拉动滚动条时，延时函数还未执行完，则清除
33             clearTimeout(clock);
34         }
35         clock = setTimeout(() => {
36             getImg();
37         }, 2000)
38     })
39 ​
40     function getImg() {
41         // 返回没有data-isLoaded的img标签
42         // [1,2,3].not(1) => 返回不含有1的数组 [2,3]
43         $('.img img').not('[data-isLoading]').each((index,item) => {
44             if(isShow(item)) loading(item);
45         })
46     }
47 ​
48     function isShow(img) {
49         return $(img).offset().top <= $(window).height() + $(window).scrollTop()
50     }
51 ​
52     function loading(img) {
53         $(img).attr('src', $(img).attr('data-lazyload'));
54         //  为已经加载的图片加一个标识，上面遍历图片的时候就会跳过已经加载了的图片
55         $(img).attr('data-isLoaded', 1);
56     }
57     </script>

 

posted @ 2020-09-24 17:38  影之轨迹  阅读(214)  评论(0)    收藏  举报