图片懒加载---动态创建的dom如何使用图片懒加载

图片懒加载现在已经算是一个被用烂了的技术了，但是对于刚接触的人，还是会遇到一些坑，本文记录一下此次项目中遇到的问题

在用原生js写项目时，对于一些滚动加载一类的，都是需要动态创建标签然后append到代码中的，这种情况使用懒加载会遇到一个问题-----无法获取到需要操作的img节点。

我的解决方法是：动态创建dom加在html这个单独写为一个方法createDom，触发图片懒加载是另外的方法lazyLoad，再刚开始加载页面时，获取数据成功之后，调用createDom，然后再通过getElementsByClassName获取到img节点，再调用lazyLoad，这样经过自己测试是可以实现的

在滚动事件中，也实时获取img节点并调用懒加载方法，可以采用事件节流等方式优化代码

以下为代码部分：

function createDom(){//创建节点的方法
************
}
// 图片懒加载，调用分别在刚开始加载页面数据时候和滚动事件中
function getTop(e) {
        var T = e.offsetTop;
        while(e = e.offsetParent) {
            T += e.offsetParent;
        }
        return T;
}
function lazyLoad(imgs) {
        var H = window.innerHeight;
		var S = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0; i < imgs.length; i++) {
            if (H + S > getTop(imgs[i]) - 20) {
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
}
//首次加载数据时调用方法
$.get("",res=>{
	if(ok){
		createDom(res)
		var imgs = document.getElementsByClassName('item-img')
		lazyLoad(imgs);
	}
    	
})
//滚动时也一直监控img是否已经进入视口
window.onscroll = function() {
			// 滚动时就一直判断img是否已经进入视口
			var imgs = document.getElementsByClassName('item-img')
			lazyLoad(imgs);
}