2021-保持简单...

Question

我很好奇懒惰加载图像，滚动到它们时将加载的图像是如何工作的。

任何提示？

Answer 1

以下是使用插件的方法：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/

Answer 2

2020年以上的解决方案：

有一种延迟加载图像的本机方法在某些浏览器中已经可以使用。尽管标准化仍在进行中，但您现在可以使用它了！只需将loading属性添加到图像标签并将其设置为“惰性”即可：

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

就是这样。当前视口足够近时，兼容的浏览器会延迟加载该图像。

此处提供更多信息：

如果您需要旧版浏览器的解决方案，则应查看MDN上的Lazy loading。

Answer 3

关于如何轻松实现这一目标的例子。

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

＆＃34; lazy.jpg＆＃34;可以在所有图像上使用，这将导致真正只加载一个图像（并且它是一个1x1px的小重量图像）。因此，请考虑我要访问的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图像将被他们的＆＃34;真实＆＃34;图片。让你的html页面加载速度更快的目的（因为这250家公司都有相同的＆＃34; logo＆＃34;在lazy.jpg :) ...但是在DOM完成加载后，JS会完成所有工作。

这当然是一个jQuery解决方案。也可以用纯粹的js来完成。

Answer 4

你可以使用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原因，您可以使用任何其他占位符（例如占位符图片）。

此外，还有一个指南如何使用它以及一些关于延迟加载图像的一般事项。

Answer 5

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

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

大多数流行的Chromium驱动的浏览器（Chrome，Edge，Opera），Firefox都支持

<img loading=lazy>，并且正在进行WebKit（Safari）的实现。 Can I use 提供了有关跨浏览器支持的详细信息。不支持load属性的浏览器会忽略它而没有副作用。

Improved data-savings and distance-from-viewport thresholds

Answer 6

有很多方法可以实现延迟加载。这个过程就是你加载你需要的东西。您可以在软件场景中延迟加载任何内容。在网站上大多数在加载图像时使用它，因为大多数网站几乎都只是图像。我指的是网站的艺术作品加上实际的人物照片，他们可以在您的服务器上拥有数千张图片。当您尝试同时加载所有这些时，通常会导致速度变慢。在某些时候，它开始减慢进程。因此，延迟加载通常是针对大型网站进行的。就像我说的那样，你可以做很多种方式。已经给出了一种方法。已经加载了img标记，但是src部分指向一个小文件的虚拟文件。不要使用图形或图片的图像......使用类似灰色块的东西......或者什么都不能使用。然后当滚动部分靠近图像靠近的滚动点时。它将运行一个函数，它将用真实的图像链接替换src。另一种方法是使用ajax和close时的滚动点将附加...加载到src中的图像的实际html代码中。这就是我实际使用的。我写了一个PHP文件来延迟加载图像，数据和文本。

此方法的重点是在需要时从网站下载文件。加载图像时，实际上是从服务器下载的。因此，当您开始处理较大的图像文件和太多图像文件时，下载过程加上实际加载时间会增加。

Answer 7

使用传统方式将侦听器附加到滚动事件或使用setInterval进行延迟加载图像非常不具备性能，因为每次调用getBoundingClientRect（）都会强制浏览器re-layout整个页面并引入相当大的jank到你的网站。

使用 Lozad.js （只有569个字节，没有依赖项），使用InteractionObserver延迟加载图片。

Answer 8

2021-保持简单...

很多插件建议。并取决于您的用例，这些对您可能很有价值。

最后，如果您只需要延迟加载一些图像，那么它就很简单：

<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) {
      observer.unobserve(entry.target);

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

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

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

使用Intersection Observer API使其非常简单。我还在shadowRoot中使用了它，并且在那里也可以正常工作。

使用JavaScript如何延迟加载图像？

8 个答案:

2021-保持简单...