图片懒加载

图片懒加载主要是用于图片很多的时候，避免网站加载时一次性加载很多图片从而造成网站卡顿的现象，使图片随着鼠标滑动按需加载，提高用户体验。

思路：

先把图片路径设置成默认的占位图，把真实路径放到一个属性中，如data-src,通过检测窗口位置选择加载哪些图片。

<ul id="imgList">
    <li><img src="default.jpg" data-src="1.jpg"/></li>
    <li><img src="default.jpg" data-src="2.jpg"/></li>
    <li><img src="default.jpg" data-src="3.jpg"/></li>
    <li><img src="default.jpg" data-src="4.jpg"/></li>
    <li><img src="default.jpg" data-src="5.jpg"/></li>
    <li><img src="default.jpg" data-src="6.jpg"/></li>
    <li><img src="default.jpg" data-src="7.jpg"/></li>
    <li><img src="default.jpg" data-src="8.jpg"/></li>
    <li><img src="default.jpg" data-src="9.jpg"/></li>
                             .
                             .
                             .
    <li><img src="default.jpg" data-src="99.jpg"/></li>
    <li><img src="default.jpg" data-src="100.jpg"/></li>
</ul>

正如现在我有一个列表，有很多张图片，鼠标滚动浏览的时候随着浏览的高度确定加载的图片。

var imgList = document.getElementsByTagName("img");
var listLen = imgList.length;
var winHei = window.innerHeight;       
var winScrollTop = 0;      
imgShow();
function imgShow(){
    winScrollTop = document.documentElement.scrollTop + winHei;
    for(var i =0;i<listLen;i++){
        scrennL = imgList[i].offsetTop; 
        if(scrennL <= winScrollTop){
            let trueSrc = imgList[i].getAttribute("data-src");
            imgList[i].setAttribute("src",trueSrc);
        }
    }
}
window.onscroll = function(){
    show();
}