简单高效实现一个按需加载图片的逻辑
需求：
根据页面滚动，当图片进入视野，就开始加载，否则不加载任何图片。
代码：
//页面加载完成时先调用一下，首屏内的图片。
loadImg();
document.addEventListener('scroll', function(e) {
//跟着滚动，继续加载剩下的图片
loadImg()
})
function loadImg(){
//slice可以将类数组转化成数组对象
[].slice.call(document.querySelectorAll('[data-src]')).forEach(function(item) {
// 判断元素是否已经进入视野
if (item.getBoundingClientRect().y<=innerHeight) {
//设置src
item.src = item.getAttribute('data-src');
//删除data-src属性，可以减少querySelectorAll的查询次数
item.removeAttribute('data-src');
}
})
}
<img data-src="xxx">代码简单，却很通用，很实用。方便扩展
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！