如何在没有 jQuery 或延迟加载的情况下推迟背景图像

根据帕特里克·塞克斯顿tutorial https://varvy.com/pagespeed/defer-images.html，我想以与这里相同的方式推迟背景图像img:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

我怎样才能使用背景做同样的事情？

<div style="background:url(your-image-here)"></div>

所需的更改只是我们选择元素的方式

document.querySelectorAll('div[data-src]');

以及我们如何设置该值（这里不是设置src属性，我们需要设置style属性）。

EDIT: 我什至会避免attribute在此处检查（在 JavaScript 中），因为我们的选择器会执行此操作。

标记（在此处编辑代码：http://codepen.io/anon/pen/rryxoK http://codepen.io/anon/pen/rryxoK)

function init() {
  var imgDefer = document.querySelectorAll('div[data-src]');
  var style = "background-image: url({url})";
  for (var i = 0; i < imgDefer.length; i++) {

    imgDefer[i].setAttribute('style', style.replace("{url}", imgDefer[i].getAttribute('data-src')));

  }
}

window.onload = init;

.deferImage {
  width: 800px;
  height: 600px;
}

<div class="deferImage" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Domestic-crested-duck-CamdenME.jpg/800px-Domestic-crested-duck-CamdenME.jpg"></div>

EDIT: 按班级名称选择 http://codepen.io/anon/pen/gwmAaW