如何实现背景图片的延迟（懒）加载？

嘿，我最近一直在用一个超简洁的脚本实现页面图片的延迟加载，逻辑和大多数主流懒加载方案基本一致——把图片的真实源路径存在data-src属性里，之后再把这个值赋值给img标签的实际src属性。

下面就是这个实用的脚本：

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { 
  img.setAttribute('src', img.getAttribute('data-src')); 
  img.onload = function() { 
    img.removeAttribute('data-src'); 
  }; 
});

简单说下它的工作逻辑：

• 先通过document.querySelectorAll('img[data-src]')筛选出所有带data-src属性的图片元素
• 遍历这些图片，把data-src中存储的真实图片路径赋值给src属性，触发图片加载
• 等图片加载完成后，移除data-src属性，避免后续重复处理这张图片

内容的提问来源于stack exchange，提问作者JoSch