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

15

这里有一个如何做，使用插件：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/

来源

2012-03-12 13:12:40 JKirchartz

0

有来实现延迟加载许多方面。这个过程只是加载你需要的东西。您可以在软件场景中延迟加载任何内容。在大多数网站上使用它时加载图像，这是因为大多数网站几乎只是图像。我的意思是网站的艺术作品以及实际的人物照片，他们可以在服务器上拥有数千幅图像。当您尝试并同时加载所有这些时，通常会导致速度变慢。在某个时候它开始放慢这个过程。所以，懒惰加载通常是为大型网站完成的。就像我说的你可以做很多种方法。已经有一种方法。已经加载了img标签，但是src部分指向一个尺寸较小的虚拟文件。不要使用图形或图片的图像...使用灰色块或使用任何东西。然后当滚动部分靠近图像靠近的滚动点时。它将运行一个函数，它将用真实图像链接替换src。另一种方法是在关闭时使用ajax和滚动点追加...在src中加载实际的html代码。这是我实际使用的。我写了一个PHP文件来延迟加载图像，数据，文本。

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

来源

2015-02-22 17:16:23 kok

3

您可以使用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的原因（例如占位符图像）。

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

来源

2015-07-17 14:40:03

4

并举例说明如何轻松做到这一点。

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

“懒惰。jpg“可以用于所有图像，这将导致实际上只加载一个图像（这是一个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图像将通过其改为“真正的“图像，目的是让你的html页面加载速度更快（因为这些公司都在lazy.jpg中都有相同的”logo“:) ......但是在完成DOM之后，JS完全照顾它d加载。

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

来源

2016-02-19 13:00:38 anoraq

-1

使用附着听者滚动事件或通过使用的setInterval的常规方式延迟加载图像是高度非高性能作为每次调用getBoundingClientRect（）强制浏览器re-layout整个页面，并会提出相当大的JANK到你的网页。

使用Lozad.js（只是569个字节，没有依赖关系），它使用InteractionObserver到延迟加载图像performantly。

来源

2017-08-29 18:42:38

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

回答

相关问题