这篇文章主要介绍了使用原生javascript实现图片滚动、延时加载功能，思路与方法均分享给大家，希望对大家能有所帮助。
实现效果：下拉滚动条时，图片出现在可见区域时，才开始加载
思路：
（1）img标签，把真实的图片地址，放在自己设置的属性里面，如 lazy-src
（2）获取img离页面的高度（在jq里是offset().top），原生是：
img.getboundingclientrect().top + document.body.scrolltop||document.documentelement.scrolltop
（3）判断img出现的位置是否在可见区域里:
在浏览器的可见区域，justtop>scrolltop&&offsettop<(scrolltop+windowheight)，这里的justtop是图片的offsettop+图片高度
//保存document在变量里，减少对document的查询 var doc = document; for(var n=0,i = this.oimg.length;n<i;n++){ //获取图片占位符图片地址 var hsrc = this.oimg[n].getattribute(this.sholder_src); if(hsrc){ var scrolltop = doc.body.scrolltop||doc.documentelement.scrolltop, windowheight = doc.documentelement.clientheight, offsettop = this.oimg[n].getboundingclientrect().top + scrolltop, imgheight = this.oimg[n].clientheight, justtop = offsettop + imgheight; // 判断图片是否在可见区域 if(justtop>scrolltop&&offsettop<(scrolltop+windowheight)){ this.isload(hsrc,n); } } }
以下为详细代码：
function lgy_imgscrollload(option){ this.oimg = document.getelementbyid(option.wrapid).getelementsbytagname('img'); this.sholder_src = option.holder_src; this.int(); } lgy_imgscrollload.prototype = { loadimg:function(){ //保存document在变量里，减少对document的查询 var doc = document; for(var n=0,i = this.oimg.length;n<i;n++){ //获取图片占位符图片地址 var hsrc = this.oimg[n].getattribute(this.sholder_src); if(hsrc){ var scrolltop = doc.body.scrolltop||doc.documentelement.scrolltop, windowheight = doc.documentelement.clientheight, offsettop = this.oimg[n].getboundingclientrect().top + scrolltop, imgheight = this.oimg[n].clientheight, justtop = offsettop + imgheight; // 判断图片是否在可见区域 if(justtop>scrolltop&&offsettop<(scrolltop+windowheight)){ //alert(offsettop); this.isload(hsrc,n); } } } }, isload:function(src,n){ var src = src, n = n, o_img = new image(), _that = this; o_img.onload = (function(n){ _that.oimg[n].setattribute('src',src); _that.oimg[n].removeattribute(_that.sholder_src); })(n); o_img.src = src; }, int:function(){ this.loadimg(); var _that = this, timer = null; // 滚动：添加定时器，防止频繁调用loadimg函数 window.onscroll = function(){ cleartimeout(timer); timer = settimeout(function(){ _that.loadimg(); },100); } } }
效果图：
以上就是本章的全部内容，更多相关教程请访问javascript视频教程！