如何实现用户懒加载？
如果一个页面加载时间过长，那么用户会失去耐心，将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域再去加载。
方法：设置滚轮事件，将页面的img标签src指向一张小图片，然后定义data-src属性指向真是的图片，src指向一张默认的图片。当页面加载时，先把可视区域内的img标签的data-src属性值赋值给src，然后监听，滚动事件，把用户即将看到的图片加载。
举个小李子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图片懒加载</title> 6 <style> 7 img { 8 display: block; 9 margin-bottom: 50px; 10 width: 400px; 11 height: 400px; 12 } 13 </style> 14 </head> 15 16 <body> 17 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 18 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 19 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 20 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 21 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 22 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 23 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 24 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 25 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 26 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 27 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 28 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 29 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 30 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 31 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 32 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 33 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 34 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 35 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 36 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 37 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 38 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 39 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 40 <img src="" data-src="https://b-ssl.duitang.com/uploads/item/201507/13/20150713094012_SLusk.jpeg" alt="稍等片刻"/> 41 42 <script> 43 var num = document.getElementsByTagName('img').length; 44 var img = document.getElementsByTagName("img"); 45 var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历 46 lazyload(); //页面载入完毕加载可是区域内的图片 47 window.onscroll = lazyload; 48 function lazyload() { //监听页面滚动事件 49 var seeHeight = document.documentElement.clientHeight; //可见区域高度 50 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度 51 for (var i = n; i < num; i++) { 52 if (img[i].offsetTop < seeHeight + scrollTop) {// offsetTop当前标签距离上方或上层控件的位置 53 if (img[i].getAttribute("src") == "") { 54 img[i].src = img[i].getAttribute("data-src"); 55 } 56 n = i + 1; 57 } 58 } 59 } 60 </script> 61 </body> 62 </html>
