下面是如何使用插件：http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/下面是jquery插件：http://www.appelsiini.net/projects/lazyload的
基本上，你在src属性中放置一个虚拟图像，并为实际图像添加另一个属性，JS检测页面的滚动位置，并在你足够接近图像时加载图像数据。它通过用实际图像的源替换src来实现这一点。
还有另一种解释：http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/的

2020+解决方案：
有一种本地的方式来延迟加载图像已经在一些浏览器中工作。虽然标准化仍在进行中，但您现在已经可以使用它了！只需将loading属性添加到您的图像标签并将其设置为“lazy”：

<img
    src="picture.jpg"
    width="100"
    height="100"
    alt="descriptive text"
    loading="lazy"
>

字符串
就是这样兼容的浏览器会在当前视口足够接近时缓慢加载该图像。
更多信息请点击此处：

• Native lazy-loading for the web
• Request to be added in the HTML specification的
• 当前浏览器支持

如果你需要一个老浏览器的解决方案，你应该看看MDN上的Lazy loading。

并举例说明如何做到这一点，很容易。

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg">

字符串
“lazy.jpg”可以用于所有图像，这将导致实际上只加载一个图像（并且是一个1x 1 px的小权重图像）。因此，假设我有一个250家商店的列表，每个商店都有一个公司的徽标。可能看起来像这样：

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg">
<img src="/images/lazy.jpg" data-real-src="/images/company-2.jpg">
<img src="/images/lazy.jpg" data-real-src="/images/company-3.jpg">
...

型
然后是魔法！将以下内容放入JavaScript文件中：

$('img[src="/images/lazy.jpg"]').each(function(index, el) {
    $(el).attr('src', $(el).data('real-src'));
});

型
wacka-wacka，所有的lazy.jpg图片都将被替换为它们的“真实的”图片。目的是让你的html页面加载更快（因为这250家公司都有相同的“标志”在lazy.jpg：）..但是JS会在DOM加载完成后处理所有这些。
当然，这是一个jQuery解决方案。可以用纯js来完成，也一样。

浏览器级别的本地延迟加载终于可用了。

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

字符串
<img loading=lazy>被大多数流行的Chrome浏览器（Chrome、Edge、Opera）支持，Firefox和WebKit（Safari）的实现正在进行中。**Can I use**有跨浏览器支持的详细信息。不支持loading属性的浏览器会简单地忽略它而不会产生副作用。

改进的数据节省和距离视口阈值

您可以使用justlazy，它独立于jQuery等依赖项，并且非常轻量级：
你需要的唯一电话是：

var placeholders = document.querySelectorAll(".load-if-visible");
for (var i = 0; i < placeholders.length; ++i) {
  Justlazy.registerLazyLoad(placeholders[i]);
}

字符串
占位符必须为以下结构：

<span data-src="url/to/image" data-alt="some alt text"
      data-title="some title" class="load-if-visible">
</span>

型
出于SEO的原因，您可以使用任何其他占位符（例如占位符图像）。
此外，还有一个如何使用它的指南和一些关于延迟加载图像的一般事情。

使用传统的方式将侦听器附加到滚动事件或使用setInterval来延迟加载图像是非常非性能的，因为每次调用getBoundingClientRect（）都会迫使浏览器re-layout整个页面，并会给您的网站带来相当大的jank。
使用**Lozad.js**（只有569字节，没有依赖关系），它使用InteractionObserver来延迟加载图像。

2021 -保持简单...

这里有很多 plugin 建议，根据你的用例，这些建议可能对你有价值。
如果你不想写下面这段简短的代码，或者你需要已经构建好的回调函数，那么你可以使用我构建的这个插件，它基于这个确切的答案，缩小后只有0.5kb。我的插件，Simply Lazy，甚至可以与IE工作，如果你只是添加一个polyfill。
在一天结束的时候，如果你只是需要延迟加载一些图像，那么它就像这样简单：

<img data-src="your-image-path-here" class="lazyload" />

字符串
还有：

let observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(function (entry) {
    if (entry.intersectionRatio > 0 || entry.isIntersecting) {
      const image = entry.target;
      observer.unobserve(image);

      if (image.hasAttribute('src')) {
        // Image has been loaded already
        return;
      }

      // Image has not been loaded so load it
      const sourceUrl = image.getAttribute('data-src');
      image.setAttribute('src', sourceUrl);

      image.onload = () => {
        // Do stuff
      }

      // Removing the observer
      observer.unobserve(image);
    }
  });
});

document.querySelectorAll('.lazyload').forEach((el) => {
  observer.observe(el);
});

型
使用Intersection Observer API使这一切变得非常简单。你也可以在shadowRoot中使用它，它在那里也工作得很好。
我还发现这个article有助于理解这里发生的事情。

有很多方法可以实现延迟加载。这个过程只是你加载你需要的东西。您可以在软件场景中延迟加载任何内容。在网站上，大多数人在加载图像时都会使用它，这是因为大多数网站几乎都是图像。我的意思是网站的艺术品加上实际的人的照片，他们可以有成千上万的图像在您的服务器上。这通常会导致当您尝试同时加载所有文件时速度变慢。在某种程度上，它开始减慢这个过程。因此，延迟加载通常用于大型网站。就像我说的，你可以用很多方法来做到这一点。已经给出了一种方法。已经加载了img标签，但是src部分指向一个小文件。不要使用图形或图片的图像...使用类似灰色块的东西。或者什么都用不上然后，当滚动部分接近图像靠近的滚动点时。它将运行一个函数，在该函数中将src替换为真实的图像链接。另一种方法是 AJAX 和滚动点时关闭将追加。。在src中加载带有图像的实际html代码。这是我实际使用的。我写了一个PHP文件来延迟加载图片、数据、文本。
这种方法的全部要点是在需要时从网站下载文件。当一个图像被加载时，它实际上是从你的服务器上下载的。因此，当您开始处理较大的图像文件和太多的图像文件时，下载过程加上实际加载时间可能会增加。

下面是一个演示示例项目：Live Demo
您可以尝试使用JavaScript实现延迟加载图像，方法是使用小的模糊占位符图像，直到下载完整图像为止。

<div class="blurred-img" style="background-image: url(imageName-small.jpg)">
  <img src="imageName-original.jpg" loading="lazy" />
</div>

字符串
要创建模糊的占位符图像，请使用自动化工具（如ffmpeg）生成原始图像的超低分辨率版本，只需在目标图像目录中的命令行上执行提供的代码。

ffmpeg -i imageName.jpg -vf scale=20:-1 imageName-small.jpg

型