谁需要 AMP？使用 Layzr.js 简化延迟加载响应图像的过程-js教程-PHP中文网

谁需要 AMP？使用 Layzr.js 简化延迟加载响应图像的过程

PHPz

发布： 2023-09-08 11:09:07

原创

1396人浏览过

google 的“加速移动页面”(amp) 项目最近帮助影响网站变得更快。凭借良好的技术和强大的内容分发网络，google 直接使 amp 增强的网站变得更快。然而，amp 也通过鼓励我们查看 amp 包含的优化和最佳实践来间接发挥作用。即使您不打算让您的网站兼容 amp，将 amp 了解为优化非 amp 网站的待办事项列表也很有用。

此列表中的优化之一是一种称为“延迟加载”的技术，我们在最近关于使用 AMP 的自定义元素的文章中看到了该技术的实际应用。通过这种技术，当访问者首次到达页面时，仅加载视口中或附近的图像。当访问者向下滚动时，其余部分会被触发加载。

延迟加载可以让访问者更快地开始与内容互动，而增强的加载速度可以提高您的搜索引擎排名。页面上的图像越多，获得的速度提升就越大。

谁需要 AMP？使用 Layzr.js 简化延迟加载响应图像的过程

在本教程中，我们将了解如何使用名为的脚本在非 AMP 网站上部署延迟加载Layzr.js。我们将尽可能地复制 AMP 的元素的功能，但我们还将使用 Layzr 特有的一些功能。

我们开始吧！

1. 基本设置

作为文章“AMP 项目：它会让您的网站更快吗？”的一部分我创建了一个包含五个图像的基本布局。为了使您能够比较使用 AMP 和自己部署延迟加载，我们将重新创建相同的五个图像布局。我将在本教程后面向您展示如何运行各种加载速度测试。

在本教程附带的源文件中，您将找到布局的 AMP 版本，以及您将在此处制作的完整版本。两者都包含在内，以帮助您决定哪种方法最适合您。

在我们逐步完成所有操作时，我建议您使用 Chrome 开发者工具 (F12) 测试您的工作，并打开网络选项卡，选中禁用缓存 ，并将限制设置为常规 3G。这会模拟平均移动连接，向您实时显示每个图像加载的图表，并将帮助您清楚地了解延迟加载的运行情况。

谁需要 AMP？使用 Layzr.js 简化延迟加载响应图像的过程

刷新页面进行测试时，按住重新加载按钮，这将出现一个下拉菜单会显示不同的选项。选择清空缓存并硬重新加载以完全模拟访问者首次到达您的网站。

谁需要 AMP？使用 Layzr.js 简化延迟加载响应图像的过程

创建 HTML Shell

让我们从基础知识开始。首先，创建一个文件夹来存放您的项目，并在其中创建一个名为 index.html 的文件。

打开它进行编辑并添加以下代码：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Layzr.js Lazy Loading</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>
    body {
      margin: 0;
    }
    img {
      display: block;
      margin: 0 auto;
    }
    </style>
  </head>
  <body>
    <h1>Welcome to the lazy loaded web</h1>



  </body>
</html>

登录后复制

通过上面的代码，我们只是获得了一个 HTML shell，并包含了一些 CSS，以确保页面的 body 和图像周围没有任何意外的间隙。

我们还包括 margin: 0 auto; ，以便我们稍后添加的图像将居中。