业界主流-站位图代码

用途:默认给他一张站位图，本身就是一张很小的图片，默认不加载(也就是懒加载)

给src一个站位图，执行真实data-src中的图片

html代码：

    <img src="default.jpg" data-src="https://thirdqq.qlogo.cn/g?b=qq&nk=45096653&s=100" >
    <img src="default.jpg" data-src="https://thirdqq.qlogo.cn/g?b=qq&nk=45096653&s=100" >
    <img src="default.jpg" data-src="https://thirdqq.qlogo.cn/g?b=qq&nk=45096653&s=100" >
    <img src="default.jpg" data-src="https://thirdqq.qlogo.cn/g?b=qq&nk=45096653&s=100" >
    <img src="default.jpg" data-src="https://thirdqq.qlogo.cn/g?b=qq&nk=45096653&s=100" >
    <img src="default.jpg" data-src="https://thirdqq.qlogo.cn/g?b=qq&nk=45096653&s=100" >
    <img src="default.jpg" data-src="https://thirdqq.qlogo.cn/g?b=qq&nk=45096653&s=100" >
    <img src="default.jpg" data-src="https://thirdqq.qlogo.cn/g?b=qq&nk=45096653&s=100" >
    <img src="default.jpg" data-src="https://thirdqq.qlogo.cn/g?b=qq&nk=45096653&s=100" >
    <img src="default.jpg" data-src="https://thirdqq.qlogo.cn/g?b=qq&nk=45096653&s=100" >

js代码

<script>
   var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName('img');
    var n = 0; //存储图片加载的位置，避免每次都从第一张照片开始
lazyload(); ///页面加载可视区域内的图片
window.onscroll = lazyload;
function lazyload(){ ///监控页面滚动事件
    var seeHeight = document.documentElement.clientHeight; ///可见区域高度
    var scrollTop = document.documentElement.scroltop|documenttop.body.scrollTop; ///滚动条距离顶部高度
    for (var i=n; i<num; i  ){
        if(img[i].offsetTop < seeHeight   scrollTop){
                if(img[i].getAttribute('src') == 'default.jpg'){
                img[i].src = img[i].getAttribute("data-src");
            }
            n = i i;
        }
    }
}
    </script>