js简单实现图片懒加载

HMTL

        <div class="index">
            <h3 style="align-content: center;font-size: 30px">向下滚动页面,查看加载效果</h3>
            <div class="index-img">
                <img data-src="http://www.jq22.com/img/cs/500x300-1.png" src="" alt="" />
            </div>
            <div class="index-img">
                <img data-src="http://www.jq22.com/img/cs/500x300-2.png" src="" alt="" />
            </div>
            <div class="index-img">
                <img data-src="http://www.jq22.com/img/cs/500x300-3.png" src="" alt="" />
            </div>
            <div class="index-img">
                <img data-src="http://www.jq22.com/img/cs/500x300-4.png" src="" alt="" />
            </div>
            <div class="index-img">
                <img data-src="http://www.jq22.com/img/cs/500x300-5.png" src="" alt="" />
            </div>
            <div class="index-img">
                <img data-src="http://www.jq22.com/img/cs/500x300-6.png" src="" alt="" />
            </div>
            <div class="index-img">
                <img data-src="http://www.jq22.com/img/cs/500x300-7.png" src="" alt="" />
            </div>
            <div class="index-img">
                <img data-src="http://www.jq22.com/img/cs/500x300-8.png" src="" alt="" />
            </div>
        </div>

CSS

/*给图片过渡效果*/
img{transition: all 0.5s;-moz-transition: all 0.5s;    /* Firefox 4 */-webkit-transition: all 0.5s;    /* Safari 和 Chrome */-o-transition: all 0.5s;    /* Opera */;}
.index{width: 400px;margin: 0 auto;padding-bottom: 100px;}
.index-img{width: 100%;height:210px;margin-top:100px;}
/*object-fit: cover;解决图片指定大小被压缩问题*/
.index-img>img{width: 100%;height: 100%;object-fit: cover;}

JS

//监听滚动条事件
window.onscroll = function(){
    Limg()
}

//页面加载时调用一次，使图片显示
window.onload = function() {
    var img = document.querySelectorAll("img[data-src]")
    for(var i = 0; i < img.length; i++) {
        img[i].style.opacity = "0"
    }
    Limg()
}

function Limg() {
    var viewHeight = document.documentElement.clientHeight // 可视区域的高度
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    var limg = document.querySelectorAll("img[data-src]")
    // Array.prototype.forEach.call()是一种快速的方法访问forEach，并将空数组的this换成想要遍历的list
    Array.prototype.forEach.call(limg, function(item, index) {
        var rect;
        if(item.getAttribute("data-src") === "")
            return
        //getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
        rect = item.getBoundingClientRect()
        // 图片一进入可视区，动态加载
        if(rect.bottom >= 0 && rect.top < viewHeight) {
            (function() {
                var img = new Image()
                img.src = item.getAttribute("data-src")
                item.src = img.src
                //给图片添加过渡效果，让图片显示
                var j = 0
                setInterval(function() {
                    j += 0.2
                    if(j <= 1) {
                        item.style.opacity = j
                        return
                    }
                }, 100)
                item.removeAttribute('data-src')
            })()
        }
    })
}

 

...