原生js实现图片懒加载+加入节流

2019-08-14 10:31:51来源:博客园 阅读 ()

这两天在学习图片的懒加载实现,看了很多大佬的博客,终于有了点成果。现在用了其中一位大佬的文章中的代码实现了图片懒加载并且在其基础上加入了节流函数。

原理就不多讲了,有需要的可以去大佬的文章看看。大佬文章可以从这里进->(https://www.jianshu.com/p/9b30b03f56c2)。

先上HTML结构:

1     <div></div>
2     <img src="" id="i1" data-src="image1">
3     <div></div>
4     <img src="" id="i2" alt="" data-src="image2">

然后是样式:

 1 <style>
 2         * {
 3             padding: 0;
 4             margin: 0;
 5         }
 6 
 7         div {
 8             height: 2000px;
 9         }
10 
11         #i1 {
12             display: block;
13             width: 200px;
14             height: 200px;
15             background-color: red;
16         }
17 
18         #i2 {
19             display: block;
20             width: 200px;
21             height: 200px;
22             background-color: green;
23         }
24     </style>

最后是JavaScript的代码:

 1 <script>
 2         var lastTime = new Date().getTime();
 3         function lazyLoad() {
 4             //放入节流函数前的准备工作
 5             function preWork() {
 6                 //获取页面图片标签
 7                 var imgs = document.querySelectorAll("img");
 8                 //可视区高度
 9                 var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
10 
11                 [].forEach.call(imgs,function (img) {
12                     //判断data-src属性是否存在,不存在代表图片已经加载过
13                     if (!img.getAttribute('data-src')) {
14                         return;
15                     }
16                     //判断高度差,替换路径后移除data-src属性
17                     if (img.getBoundingClientRect().top < h) {
18                         img.src = img.getAttribute('data-src');
19                         img.removeAttribute('data-src');
20                     }
21                 });
22 
23                 //利用与运算,如果与前面为false,则不运行后面的语句;若为true,继续运行后面的语句。从而达到路径替换完后可以执行移除监听事件的效果
24                 [].every.call(imgs, function (img) {
25                     return !img.getAttribute('data-src');
26                 }) && (window.removeEventListener("scroll", lazyLoad));
27             }
28 
29             //节流函数
30             function throttle() {
31                 var nowTime = new Date().getTime();
32                 if (nowTime - lastTime > 1000) {
33                     preWork();
34                     console.log("节流执行");
35                     lastTime = nowTime;
36                 }
37 
38             }
39 
40             //执行节流函数
41             throttle();
42         }
43 
44         window.addEventListener("scroll", lazyLoad);
45         window.addEventListener("load", lazyLoad);
46 
47     </script>

js的代码里面加了一些注释,希望能帮助大家理解。

本人是前端小菜鸟一枚,代码里如果出现错误希望大家多多包涵并在评论区提出,本人会认真改正的!


原文链接:https://www.cnblogs.com/zglin/p/11320649.html
如有疑问请与原作者联系

标签:QPSHTMLtimIEJavaScript

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:page分页问题,根据页码获取对应页面的数据,接口调用

下一篇:推荐JavaScript动态效果库