延迟加载图片怎么设置?最简单一种方法是通过添加loading=“lazy属性实现浏览器加载,此外还可以借助交叉观察器API和Lozad.js设置图片延迟加载,以实现WordPress优化。有的商家可能还云里雾里的,所以下文将展示延迟加载图片是什么、为什么及怎么设置的内容,以供大家参考。

一、延迟加载图片是什么

延迟加载图片是指使用一组技术仅加载访问者当前正在查看的图像。 可以在首屏内容完全加载后在滚动时延迟加载内容,或者当它只需要出现在浏览器的视口中时有条件地加载内容。这意味着,如果用户不一直向下滚动,放置在页面底部的图像甚至不会被加载,最终提高外贸独立站程序性能。

二、为什么要设置延迟加载图片

网站页面的负载主要包括图片、脚本、模板、文本样式和记录。在任何情况下,图片占正常网站页面大小的60%以上。

在没有增强的情况下,客户端的互联网浏览器会在完全交付页面之前下载每一个资产。这会导致负担时间延长,从而导致个人离开。WooCommerce曾发布过一项统计,每提高100毫秒的页面速度,一个外贸独立站就可以获得1%的收入。

在这种情况下,采取必要的步骤来减少网站加载时间是很有希望的,此外由于图片是页面大小的重要支撑,因此从图片开始是一个明智的想法。在这里延迟加载可能成为最重要的因素。

1、改善 DOM 加载时间

如果网站使用 JavaScript 来显示内容或向用户提供某种功能,那么快速加载 DOM 就变得至关重要。脚本通常会等到 DOM 完全加载后再开始运行。在具有大量图像的网站上,延迟加载(或异步加载图像)可能会决定用户留下或离开网站的重要因素。

2、节省资源

仅当访客需要时才会处理延迟图像,这减少了立即跳出或不向下滚动的用户在页面上传递的总字节数。如果用户的 CDN 提供商根据数据传输和 HTTP 请求收费,那么延迟加载实际上可以为商家节省成本。对于使用有限数据计划的访问者来说更是如此。

三、延迟加载图片怎么设置

1、原生(浏览器级)延迟加载-最简单的选择

目前该种方法支持Chrome、Edge、Opera、Firefox等主要的流行浏览器。使用浏览器延迟加载,只需要在HTML标记中的img标签中添加一个值为lazy的加载属性,即loading=“lazy”。这样用户无需JavaScript、API或计算,就可以告诉浏览器哪些图像要需延迟加载。

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

不幸的是,这种方法也有一些缺点。它缺乏浏览器支持,例如Chrome完全支持它,但Firefox和Safari分别提供部分支持和不支持。而且不适用于背景图像,即使在 Chrome 中也是如此,如此一来用户仍然需要编写一些 JavaScript。

2、Intersection Observer API

交叉观察器API提供了一种异步检测目标元素与祖先元素或顶级文档的视口相交情况变化的方法,换句话说,Intersection Observer API 异步监视一个元素与另一个元素的交集。

假设想延迟加载图像,每个图像的标记如下所示:

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

在这里,图像的路径包含在 data-src 属性中,而不是 src 属性中,原因是使用 src 意味着图像会立即加载。

在 CSS 中,可以为每个图像指定一个最小高度值,比如 100px。这为每个图像占位符(没有 src 属性的 img 元素)提供了一个垂直维度:

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

然后在 JavaScript 文档中,需要创建一个配置对象并将其注册到 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
preloadImage(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);
});

该解决方案的优点是实施起来轻而易举有效,并且具有交叉点,缺点是不支持 IE 11 和 Opera Mini。

3、Lozad.js

实现图像延迟加载的一个快速简便的替代方法是让 JS 库完成大部分工作。

Lozad.js 是一个高性能、轻量级且可配置的延迟加载器,它使用没有依赖关系的纯 JavaScript,是在用户滚动图像、视频和 iframe 时延迟加载 JavaScript 的绝佳工具。

可以使用 npm/Yarn 安装 Lozad,并使用选择的模块打包器导入它:

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

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

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

接下来将图片标签中的 src 属性替换为 data-src:

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

最后在 JS 文档中初始化 Lozad:

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

本站也为外贸建站的商家提供WordPress、WordPress+WooCommerce和Shopify独立站搭建和运营(谷歌SEO优化、SEM托管、海外社媒运营优化、智能化邮件营销)的一站式服务,最低价格仅需三千元左右。现在下单的顾客可享受买一赠三(域名、服务器和SSL证书)的购买优惠,还为Shopify建站的商家提供一年的免费技术支持。

推荐阅读:

六大WordPress图像优化插件评测

提高商品转化率之必备图片SEO优化技巧

网站代码优化的内容有哪些及优化方法?

相关文章

  • 页面加载速度优化

    独立站SEO优化:页面加载速度慢怎么优化?

    随着快餐时代带来的碎片化阅读习惯,网站加载速度的快慢已经成为影响网站转化率和跳出率的重要因素,那么页面加载速度慢该怎么优化呢?商家可以通过图片优化、CDN加速、代码优化等方式实现页面加载速度的提高。接下来本文将基于此为大家具体介绍页面速度优化的操作方法,希望可以为大家的外贸建站与优化工作带来一定的参考意见。 页面加载速度优化一:图片优化 图片往往占据整个网站的90%的空间,相较于视频,其数量更多,相较于文字,其体积更大,因此图片的优化,不仅可以提升用户访问体验,而且有利于网站搜索引擎的优化,提高…

    网站SEO 2024年 10月 30日
  • 谷歌SERP

    谷歌SERP是什么及功能介绍

    谷歌SERP是什么?谷歌SERP是谷歌搜索结果页面的简称,主要为用户展示搜索结果(所谓的片段)、AI 概览、知识图谱、精选片段、答案框、图像、购物结果等内容,并且根据用户个性化搜索的不同,谷歌SERP展示的结果也不同。对于一些想进行谷歌外贸建站的商家而言,了解谷歌SERP是什么及功能有利于进一步掌握独立站优化的内容,所以下文将基于此展开下文。 一、谷歌SERP是什么 搜索功能是搜索引擎结果页面 (SERP) 上的元素,它提供标准链接列表之外的信息。包括精选摘要、图片包和知识面板等内容,这些功能使…

    网站SEO 2025年 6月 24日
  • DeepSeek多语言翻译示例

    DeepSeek关键词使用技巧

    随着DeepSeek人工智能的火爆,SEO行业也随之迎来了大变革,基于AI大数据驱动的关键词拓展方法,进一步节省了用户关键词搭建、拓展和筛选的时间和精力。所以下文将基于此为大家讲解如何基于DeepSeek帮助大家优化外贸建站过程中关键词库搭建和拓展的工作,以帮助大家更好的提高外贸建站与推广的效率。 一、DeepSeek建立基础词库核心 1、任务 收集最基础的行业关键词,为后续扩展做基础。 2、操作指南 (1)产品自我介绍 对DeepSeek说:”这是我的产品说明书(上传文件),请帮我…

    网站SEO 2025年 3月 3日
  • 网站TDK优化技巧指南

    网站TDK是什么?TDK优化技巧指南

    网站TDK是什么?网站TDK指的是独立站的标题、描述和关键词部分,是外贸建站工作不可缺少的一部分,因为一个好的TDK有利于优化网站结构,从而提高网站的搜索引擎排名,那么到底该如何优化网站TDK呢?下文将为大家具体介绍TDK优化技巧指南,为大家提供一个参考意见。 TDK优化技巧指南之标题优化 标题(Title)是用户在搜索结果页面最直观了解网站的部分,是搜索引擎判断页面相关性的一个重要指标。主要有网站标题、广告标题、文章标题、页面标题等不同类型,为了确保标题在搜索引擎中具有吸引力且能传达正确的信息…

    网站SEO 2024年 10月 28日
  • 页面关键词优化

    谷歌SEO优化之页面关键词优化方法

    现在已经有了一个关键词列表,接下来会想围绕其构建内容,以期望对其进行排名,那么应该怎样将关键词合并到内容中才能获得更高的排名并让用户满意呢?本文为大家讲解页面关键词的优化。 一、关键词意图如何影响页面的搜索引擎优化 假设想要优化关键词短语: “second hand clothes”。大家需要围绕这个词构建内容,但我文章应该从什么方向来切入,为了排名获取内容吸引多数的搜索用户,这就需要摸清用户的搜索意图。 想要购买二手衣服 想要二手衣服的照片 想要对二手衣服进行再利用 针对这个问题,只需查看搜索…

    网站SEO 2024年 4月 28日
  • 关键词研究工具

    9个实用的SEO免费和付费关键词研究工具

    工欲善其事必先利其器,想要顺利进行关键词研究,离不开正确的关键词研究工具的支持。在这篇文章中,我们将介绍九种实用的SEO免费和付费关键词研究工具,用于为网站内容进行关键字研究。 一、免费关键词研究工具 1、谷歌关键词规划师(Google Keyword Planner) Google有一些工具可以帮我们进行关键词研究,它们的免费AdWords工具称为Keyword Planner就是其中之一,尤其是如果在一些广告活动中使用AdWords。(注意: 需要设置一个AdWords账户才能使用Keywo…

    网站SEO 2024年 4月 29日
联系我们

联系我们

0551- 62586667

邮件:service@spiderltd.com

工作时间:周一至周日,9:00 - 21:00,节假日不休息

在线客服
微信客服
微信客服
分享本页
返回顶部