黑帽达人官网黑帽达人官网

欢迎光临
我们一直在努力

提高网站性能的五种延迟加载图像方法

由于图像是网络上最受欢迎的内容类型之一,网站上的页面加载时间很容易成为一个问题。

即使经过适当的优化,图像的重量也会相当大。这可能会对访问者在访问你的网站之前必须等待的时间产生负面影响。除非你想出一个不影响速度感知的图像加载解决方案,否则他们很可能会变得不耐烦,在其他地方导航。

在本文中,您将了解五种延迟加载图像的方法,您可以添加这些方法Web优化工具包,改善网站上的用户体验。

什么是延迟加载?

延迟加载图片意味着在网站上异步加载图片——也就是说,在首屏内容完全加载之后,或者甚至有条件地,只有当它们出现在浏览器的视口中时。这意味着,如果用户不总是向下滚动,放置在页面底部的图像甚至不会被加载。

许多网站使用这种方法,但在图片较多的网站上尤为明显。试着浏览你最喜欢的在线猎场,以获得高分辨率的照片,你很快就会意识到该网站如何只加载有限数量的图像。当你向下滚动页面时,你会看到占位符图像快速填充真实图像进行预览。例如,注意Unsplash.com上的加载器:将页面的该部分滚动到视图中会触发用全分辨率照片替换占位符:

为什么要关心延迟加载图像?

至少有几个好理由可以考虑为你的网站延迟加载图像:

若使用您的网站JavaScript快速加载以显示内容或为用户提供某种功能 DOM 它变得至关重要。脚本通常要等 DOM 完全加载后才开始运行。延迟加载(或异步加载图像)可能会影响用户在拥有大量图像的网站上停留或离开您的网站。

由于大多数延迟加载解决方案只在用户滚动到视图中可见的位置时才加载图像,如果用户从未到达这一点,他们将永远不会加载这些图像。这意味着节省了大量的带宽,大多数用户,特别是使用移动设备和慢速连接访问Web所有用户都会感谢你。

延迟加载图像有助于提高网站性能,但最好的方法是什么?

没有完美的方法。

如果您熟悉JavaScript,那么实现自己的延迟加载解决方案应该不是问题。没有什么比自己编写代码更能控制你的了。

或者,你可以浏览Web寻找可行的方法并开始测试它们。我就是这么做的,遇到了这五种有趣的技术。

#1 原生延迟加载

图像和iframe原生延迟加载很酷。没有什么比下面的标记更直接了:

<img src="myimage.jpg" loading="lazy" alt="..." /> <iframe src="content.html" loading="lazy"></iframe>

如您所见,没有 JavaScript,没有动态交换src属性值只是普通的旧属性值 HTML。

该loading该属性为我们提供了延迟屏幕外的图像iframe选项,直到用户在页面上滚动。loading以下三个值中的任何一个都可以使用:

lazy: 非常适合延迟加载

eager: 指示浏览器立即加载指定内容

auto:保留延迟加载或不延迟加载到浏览器的选项。loading以下三个值中的任何一个都可以使用:

lazy: 非常适合延迟加载

eager: 指示浏览器立即加载指定内容

auto:保留延迟加载或不延迟加载到浏览器的选项。

这种方法没有竞争对手:它的为零,干净简单。然而,尽管大多数主要浏览器在撰写本文时都是正确的loading属性有很好的支持,但并非所有浏览器都支持。

请不要错过延迟加载图像的优秀功能(包括浏览器支持灵活性)的深入文章 Addy Osmani 的"网络原始图像延迟加载"!。

#2 使用 Intersection Observer API 延迟加载

Intersection Observer API 您可以使用的延迟加载图片和其他内容是一个现代界面。Intersection Observer API 它提供了一种异步观察目标元素与祖先元素或顶级文档视角的交叉变化的方法。

换句话说,一个元素与另一个元素的交集被异步观察。

Denys Mishunov 有一个关于 Intersection Observer 使用其延迟加载图像的伟大教程。这是他的解决方案。

假设您想延迟加载图片库。如下所示:

<img data-src="image.jpg" alt="test image">

请注意如何包含图像的路径data-src而非属性src属性中。原因是使用src这意味着图像会立即加载,这不是你想要的。

在 CSS 你给每个图像一个min-height值,例如100px.这是每个图像占位符(没有) src 属性的 img 元素)提供垂直维度:

img{ min-height: 100px; /* more styles here */ }

然后在JavaScript在文档中创建一个config对象并注册为一个intersectionObserver实例中:

// create config object: rootMargin and threshold // are two properties exposed by the interface const config ={ rootMargin: '0px 0px 50px 0px', threshold: 0 }; // register the config object with an instance // of intersectionObserver let observer = new intersectionObserver(function(entries, self){ // iterate over each entry entries.forEach(entry =>{ // process just the images that are intersecting. // isIntersecting is a property exposed by the interface if(entry.isIntersecting){ // custom function that copies the path to the img // from data-src to src ploadImage(entry.target); // the image is now in place, stop watching self.unobserve(entry.target); }}); }, config);

最后,您遍历所有图像并添加它们iterationObserver实例中:

const imgs = document.querySelectorAll('[data-src]'); imgs.forEach(img =>{ observer.observe(img); });

该解决方案的优点:易于实施,有效,可以intersectionObserver繁重的计算工作。

另一方面,尽管大多数浏览器都支持最新版本 Intersection Observer API,但并非所有浏览器都一致支持。

另一方面,尽管最新版本的大多数浏览器都支持 Intersection Observer API,但并非所有浏览器都一致支持。幸运的是,有一个polyfill可用。

#3 Lozad.js

实现图像延迟加载的是实现图像延迟加载 JS 库为您完成大部分工作。

Lozad 纯性能高、轻量级、可配置JavaScript惰性加载器,不依赖项。您可以使用它来延迟图像、视频的加载iframe 等等,它使用 Intersection Observer API。

你可以在 npm/Yarn 中包含 Lozad 并使用您选择的模块包装器导入:

npm install --save lozad yarn add lozadimport lozad from 'lozad';

或者,您可以简单地使用它 CDN 下载并添加到库中 HTML 页面底部的< script>标签中:

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"> </script>

接下来,对于基本实现,将类

lozad

标记中添加的资产:

<img class="lozad" data-src="img.jpg">

最后,在你的 JS 实例化文档 Lozad:

const observer = lozad(); observer.observe();

您将在Lozad GitHub 在仓库上找到所有关于如何使用仓库的详细信息。

假如你不想深入研究 Intersection Observer API 工作原理,或者你只是在寻找适合各种内容类型的快速实现,那么 Lozad 是个不错的选择。

但是,请注意浏览器的支持,并最终将此库与 Intersection Observer API 的 polyfill 集成。

但是,请注意浏览器的支持,并最终将此库与 Intersection Observer API 的 polyfill 集成。

#4 图像模糊效果的延迟加载

如果您是Medium读者,你一定注意到了网站如何在帖子中加载主图片。

您首先看到的是图像的模糊和低分辨率副本,其高分辨率版本正在延迟加载。

您可以有趣的模糊效果的图像可以通过多种方式延迟加载。

我们最喜欢的技术是 Craig Buckler。这个解决方案的所有优点:

性能:只有 463 字节的 CSS 和 1,007 字节的缩小JavaScript代码

支持视网膜屏幕

无依赖:不需要 jQuery 或者其他库和框架

逐步增强抵消旧浏览器和失败的能力 JavaScript

#5 Yall.js

Yall 用于图像、视频和 iframe。更具体地说,它的使用 Intersection Observer API,必要时巧妙运用传统的事件处理程序技术。

包含在您的文档中 Yall 时,您需要以下方式初始化:

<script src="yall.min.js"></script> <script> document.addEventListener("DOMContentLoaded", yall); </script>

接下来,延迟加载一个简单的img元素,您只需在标记中执行以下操作:

<img class="lazy" src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">

请注意以下事项:

将类添加到元素中

src值是占位符图像

延迟加载图像的路径是data-src属性内

Yall 好处包括:

I nt
未经允许不得转载:黑帽达人官网 » 提高网站性能的五种延迟加载图像方法
分享到: 更多 (0)

黑帽达人官网专业提供黑帽seo快排、黑帽seo技术、黑帽seo优化、快速提升排名、黑帽seo推广等服务。为企业客户提供更好的网络营销模式拓宽销售渠道,让客户盈利是我们服务的初衷,欢迎大家一起交流!

黑帽seo快排