图片懒加载实现原理

图片懒加载实现原理

原生图片懒加载实现

var num = document.getElementsByTagName('img').length; # 获取img 标签的数量
    var img = document.getElementsByTagName("img"); # 找到所有的img标签 数组集合[ , , ]
    var n = 0; # 存储图片加载到的位置，避免每次都从第一张图片开始遍历
    lazyload(); # 页面载入完毕，调用lazyload()方法 加载可是区域内的图片
    window.onscroll = lazyload; # 滑动事件，把 lazyload方法 交给window.onscroll，当页面滑动会执行 lazyload方法

    function lazyload() { //监听页面滚动事件
        var seeHeight = document.documentElement.clientHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < num; i++) {

	    # img[i].offsetTop 距离页面顶部的高度

            if (img[i].offsetTop < seeHeight + scrollTop) { 

		# 进入可视区域内

                if (img[i].getAttribute("src") == "") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
     }