有点晚了，但如果它有利于他人，有一个伟大的文章在这个主题上的帕特里克塞克斯顿https://varvy.com/pagespeed/defer-images.html
他基本上是建议同样的事情，只有通过使用微小的基地64编码的图像，他可以把他的图像标签直接在HTML中，这有能够控制属性，如高度，宽度，alt等单独的好处。与在脚本中创建整个图像标签相比，以这种方式维护HTML要容易得多。

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image1.jpg" alt="image 1">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image2.jpg" alt="image 2">

然后你的脚本是简单和通用的所有图像

<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>

这似乎是一个相当干净的方式推迟图像。唯一潜在的问题是，如果图像携带重要信息，如“数据属性是HTML5中的新功能”。
另一种选择是将图像放在正文的末尾，并使用CSS来定位它们。就我个人而言，我会坚持使用JavaScript。

以下是展示.querySelectorAll的版本：

function swapSrcAttributes(source) {
  return function(element) {
    element.setAttribute('src', element.getAttribute(source));
  }
}

function forEach(collection, partial) {
  for (var i = 0; i < collection.length; i++) {
     partial(collection[i]);
  }
}

function initDeferImages() {
  // for images
  var deferImages = document.querySelectorAll('img[data-src]');

  // or you could be less specific and remove the `img`
  deferImages = document.querySelectorAll('[data-src]');

  forEach(deferImages, swapSrcAttributes('data-src'));
}

window.onload = function() {
  initDeferImages();
}

以下是.querySelector和.querySelectorAll的兼容性表，请访问https://caniuse.com/#feat=queryselector

HTML

<img
    width="1024"
    src="https://placehold.it/64x48.jpg"
    data-src-defer="https://images.unsplash.com/photo-1570280406792-bf58b7c59247?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1486&q=80"
    alt="image 1"
/>
            
<img
    width="1024"
    src="https://placehold.it/64x48.jpg"
    data-src-defer="https://images.unsplash.com/photo-1557053964-d42e8e29cb27?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
    alt="image 2"
/>

JS

function deferImgs() {
    Array
    .from(document.querySelectorAll("img[data-src-defer]"))
    .forEach((element) => {
        element.setAttribute("src", element.dataset.srcDefer);
        });
}
    
window.addEventListener("load", deferImgs());

================================================================
我正试图遵守法鲁克的要求与此编辑。
我尽力做到最好，但不幸的是，英语只是我会说的第三种语言。我不是语言天才。：D个
这个js代码片段说明了一些大图片的延迟加载。这不是一个实际的实现。图像之间的大小差异是故意巨大的。这是因为测试必须是说明性的。您可以通过浏览器开发工具页面监视其操作。F12 >网络选项卡>速度设置测试的理想网络速度是1 - 3 MB/s之间（有些网络速度慢）。您可能需要多次运行该测试，以便您可以看到，在这种情况下，加载图像的顺序不受控制，而是取决于传输。因为它不受监管，所以无法预测哪个图像将首先到达。
我们首先将一个小图像加载到一个大占位符中。（image：64x48.jpg > placeholder width=“1024”）.
querySelectorAll（）方法返回一个静态节点列表。这个节点列表乍一看像一个数组，但它不是。
这是一个类似数组的对象：

document.querySelectorAll("img[data-src-defer]")

方法可以从这个对象创建一个新的数组示例。forEach方法现在可以在这个数组上执行了。forEach（）方法为数组的每个元素执行一次提供的函数。
在这种情况下，数组的每个元素都传递给这个函数一次：

(element) => {
        element.setAttribute("src", element.dataset.srcDefer);
        }

并且该函数将图像标签的src="”属性的值设置为相同图像标签的数据集的值。

src="https://placehold.it/64x48.jpg";

data-src-defer="https://images.unsplash.com/photo-1570280406792-bf58b7c59247?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1486&q=80";

src = data-src-defer;

So finally:

src="https://images.unsplash.com/photo-1570280406792-bf58b7c59247?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1486&q=80";

你可以像下面的例子一样简单地做到这一点：
所有图像都有data-src属性，您可以在其中放置文件路径。和src属性与一个假的透明1x1px png图像。您还可以添加loading属性设置到lazy，它告诉现代浏览器avoid to load immediately the images that are out of viewport（可见站点区域）

<img data-src="path/to/image.jpg" loading="lazy"
     src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />

添加此脚本以使所有图像在网站加载后获得src属性（您需要jQuery才能使其工作）

$(function(){
    $("img[data-src]").attr("src", function(){ return $(this).data("src"); });
});

我建议使用简单的lazy loading（参见文档here）

<img src="image.jpg" alt="..." loading="lazy" />