实现效果：下拉滚动条时，图片出现在可见区域时，才开始加载

思路：

(1)img标签，把真实的图片地址，放在自己设置的属性里面，如惰性科学研究委员会

(2)获取img离页面的高度（在JQ里是偏移量()。顶部),原生是：

img.getBoundingClientRect().顶级文档。尸体。向上滚动| |文档。文档元素。滚动顶部

(3)判断img出现的位置是否在可见区域里：在浏览器的可见区域，justocrolltopofsettop(scroltop窗口高度)，这里的justTop是图片的偏移图片高度

复制代码代码如下：//保存文件在变量里，减少对文件的查询var doc=文档；对于(var n=0，I=这个。奥姆。长度；ni；n ){ //获取图片占位符图片地址var hSrc=this.oImg[n].getAttribute(这个。sholder _ src)；if(HSrc){ var scroll top=doc。尸体。滚动顶部| |文档。文档元素。顶部滚动，窗口高度=文档。文档元素。客户端高度，偏移量=this.oImg[n].getBoundingClientRect().top scrollTop，imgHeight=this.oImg[n].clientHeight，justTop=offsetTop imgHeight//判断图片是否在可见区域if(justtopcrolltopofsettop(scroltop窗口高度)){ 0

this.isLoad(hSrc，n)；} }

}

以下为详细代码：

复制代码代码如下：函数LGY_imgScrollLoad(选项){这个。oimg=文档。getelementbyid(选项。wraid ).getElementsByTagName(' img ')；这个。sholder _ src=选项。holder _ src这个。int()；} LGY _ imgscrollload。prototype={ loadimg : function(){//保存文件在变量里，减少对文件的查询var doc=文档；对于(var n=0，I=这个。奥姆。长度；ni；n ){ //获取图片占位符图片地址var hSrc=this.oImg[n].getAttribute(这个。sholder _ src)；if(HSrc){ var scroll top=doc。尸体。滚动顶部| |文档。文档元素。顶部滚动，窗口高度=文档。文档元素。客户端高度，偏移量=this.oImg[n].getBoundingClientRect().top scrollTop，imgHeight=this.oImg[n].clientHeight，justTop=offsetTop imgHeight//判断图片是否在可见区域if(justtopcrolltopofsettop(scroltop窗口高度)){//alert(offsetTop)；this.isLoad(hSrc，n)；} }

} }，isLoad:function(src，n){ var src=src，n=n，o_img=new Image()，_ that=thiso_img.onload=(函数(n){ _that.oImg[n].setAttribute('src '，src)；_that.oImg[n].移除属性(_。sholder _ src)；})(n)；o _ img.src=src

}，int :函数(){ this。LoadIMg()；var _that=this，timer=null//滚动：添加定时器，防止频繁调用loadImg函数窗户。onscroll=function(){ clear time out(计时器);timer=setTimeout(function(){ _ that。load img()；},100);} } }

效果图：

以上就是本文的全部内容了，实现的效果不比jQuery插件实现的差吧，代码还简洁，小伙伴们参考下吧。