版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_25354709/article/details/85276499
图片滚动按需加载：在某个区域的图片（自定义的范围，一般是首屏以下的区域），拉动滚动，图片出现在可视范围才开始加载，目的是减少请求，减耗带宽，提高首屏的呈现速度，让用户第一时间看到网页内容，留下美好的第一印象。
讲解：
（一）需要按需加载的img标签，图片的真实地址保存到自定义的属性里，如 'data-src' ，那么src属性用一张1像素透明的图片
（二）把某范围内的img标签元素保存到数组里面
（三）定义一个方法：遍历数组元素，然后判断元素的offsetTop是否在滚动的可视范围内，如果在，交换图片的属性 ('data-src','src')，然后删除这个元素，那么在下次遍历就不存在
load: function () {
//->全部加装，解除事件
if (this.imgList.length == 0) {
this.removeHandler(window, 'scroll', this.fnLoad);
this.removeHandler(window, 'resize', this.fnLoad);
return
}
var st = document.body.scrollTop || document.documentElement.scrollTop,
clientH = document.documentElement.clientHeight,
scrollArea = st + clientH;
for (var n = 0; n < this.imgList.length; n++) {
var offsetTop = this.imgList[n].getBoundingClientRect().top + st,
imgH = this.imgList[n].clientHeight;
if (scrollArea > (offsetTop - 200) && (imgH + offsetTop) > st) {
var _src = this.imgList[n].getAttribute(this.holderSrc);
this.imgList[n].setAttribute('src', _src);
this.imgList.splice(n, 1); //->删除已经加载完的元素
n--;
}
}
},（四）给window对象，scroll 与 resize 添加此事件
（五）用户有可能快速拉滚动条，这样会导致事件的频繁触发，所以需要添加个setTimeout
bind: function (obj, fn) {
var _this = this;
return function () {
if (_this.timer) clearTimeout(_this.timer);
_this.timer = setTimeout(function () {
fn.apply(obj, arguments);
}, 300);
}
},完整代码：
function LazyScroll(opt) {
this.init(opt);
}
LazyScroll.prototype = {
init: function (opt) {
this.setOptions(opt);
this.load();
this.fnLoad = this.bind(this, this.load);
this.addHandler(window, 'scroll', this.fnLoad);
this.addHandler(window, 'resize', this.fnLoad);
},
setOptions: function (opt) {
this.holderSrc = opt.holderSrc || 'data-src';
this.wrapId = opt.wrapId;
this.imgList = [];
this.timer = null;
var targets = null;
if (document.querySelectorAll) {
targets = document.querySelectorAll("#" + this.wrapId + "img")
} else {
targets = document.getElementById(this.wrapId).getElementsByTagName("img")
}
var n = 0,
len = targets.length;
//->把元素存到数组里
for (n; n < len; n++) {
if (targets[n].getAttribute(this.holderSrc)) {
this.imgList.push(targets[n]);
}
}
},
load: function () {
//->全部加装，解除事件
if (this.imgList.length == 0) {
this.removeHandler(window, 'scroll', this.fnLoad);
this.removeHandler(window, 'resize', this.fnLoad);
return
}
var st = document.body.scrollTop || document.documentElement.scrollTop,
clientH = document.documentElement.clientHeight,
scrollArea = st + clientH;
for (var n = 0; n < this.imgList.length; n++) {
var offsetTop = this.imgList[n].getBoundingClientRect().top + st,
imgH = this.imgList[n].clientHeight;
if (scrollArea > (offsetTop - 200) && (imgH + offsetTop) > st) {
var _src = this.imgList[n].getAttribute(this.holderSrc);
this.imgList[n].setAttribute('src', _src);
this.imgList.splice(n, 1); //->删除已经加载完的元素
n--;
}
}
},
bind: function (obj, fn) {
var _this = this;
return function () {
if (_this.timer) clearTimeout(_this.timer);
_this.timer = setTimeout(function () {
fn.apply(obj, arguments);
}, 300);
}
},
addHandler: function (node, type, fn) {
if (node.addEventListener) {
node.addEventListener(type, fn, false);
} else {
node.attachEvent('on' + type, function () {
fn.apply(node, arguments);
});
}
},
removeHandler: function (node, type, fn) {
if (node.addEventListener) {
node.removeEventListener(type, fn, false);
} else {
node.detachEvent("on" + type, fn);
}
}
}<body id="body">
<div style="background-color:#ccc;height:1000px;">1</div>
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff" alt="" />
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff" alt="" />
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff" alt="" />
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff" alt="" />
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff" alt="" />
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff" alt="" />
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff" alt="" />
<script type="text/javascript" src="myLazyScroll.js"></script>
<script>
new LazyScroll({'wrapId': 'body'});
</script>
</body>二、使用jQuery的lazyload.js
使用方法：
（一）引用jquery和jquery.lazyload.js到你的页面
三、移动端的可以参考 echo.js
参考博客：