原生JS实现图片懒加载

HTML部分：

 

 1 <div>
 2     <img data-src="1.jpg" src="0.gif" alt="">
 3     <img data-src="1.jpg" src="0.gif" alt="">
 4     <img data-src="1.jpg" src="0.gif" alt="">
 5     <img data-src="1.jpg" src="0.gif" alt="">
 6     <img data-src="1.jpg" src="0.gif" alt="">
 7     <img data-src="1.jpg" src="0.gif" alt="">
 8     <img data-src="1.jpg" src="0.gif" alt="">
 9     <img data-src="1.jpg" src="0.gif" alt="">
10     <img data-src="1.jpg" src="0.gif" alt="">
11     <img data-src="1.jpg" src="0.gif" alt="">
12     <img data-src="1.jpg" src="0.gif" alt="">
13     <img data-src="1.jpg" src="0.gif" alt="">
14     <img data-src="1.jpg" src="0.gif" alt="">
15     <img data-src="1.jpg" src="0.gif" alt="">
16     <img data-src="1.jpg" src="0.gif" alt="">
17     <img data-src="1.jpg" src="0.gif" alt="">
18     <img data-src="1.jpg" src="0.gif" alt="">
19     <img data-src="1.jpg" src="0.gif" alt="">
20     <img data-src="1.jpg" src="0.gif" alt="">
21     <img data-src="1.jpg" src="0.gif" alt="">
22     <img data-src="1.jpg" src="0.gif" alt="">
23     <img data-src="1.jpg" src="0.gif" alt="">
24 </div>

 

JS部分：

　　

 1 /*
 2 思路 1.先将图片地址存在"data-src"中
 3      2.图片出现在页面中就将"src"的地址改变
 4 重点 判断图片是否出现在页面中
 5         1.图片距离页面顶部的高度 + 屏幕高度
 6         2.页面距离顶部被卷起来的高度
 7 */
 8 //可操作部分(建议使用前测试)
 9     var m = 500;  //值越大顶部加载的越多
10     var n = 0;  //值越大加载的越多
11 
12 //选定img元素
13 var imgs = document.getElementsByTagName("img");
14 //判断浏览器的高度
15 var win_h = window.innerHeight||document.documentElement.clientHeight;
16 //更换图片
17 function replace(num){
18     //不能直接将img的"src"等于"data-src",所以先获取"data-src"的值,然后再添加给"src"
19     imgs[num].setAttribute("src", imgs[num].getAttribute("data-src"));
20 }
21 
22 //页面滚动时判断滚动到位置(出现在视图窗口),进行加载
23 window.onscroll = function(){
24     //页面被卷起来的部分的高度
25     var scroll_top = window.pageYOffset;
26     //图片距离页面顶部的高度
27     for (var i = 0; i < imgs.length; i++) {
28         var c = imgs[i].offsetTop;
29         //当图片刚好在可视窗口之内时,替换内容
30         if (c > (scroll_top - m) && c < (scroll_top + win_h - n)) {
31             replace(i);
32         }
33     }
34 }
35 //开始页面就要加载一部分图片
36 window.onscroll();

 

posted @ 2019-11-11 15:22  银泰。。  阅读(248)  评论(0)    收藏  举报