Rumah > Artikel > hujung hadapan web > Siapa yang memerlukan AMP? Permudahkan proses malas memuatkan imej responsif dengan Layzr.js

Siapa yang memerlukan AMP? Permudahkan proses malas memuatkan imej responsif dengan Layzr.js

PHPzasal: 2023-09-08 11:09:071424semak imbas

Projek Accelerated Mobile Pages (AMP) Google baru-baru ini membantu menjadikan tapak web lebih pantas. Dengan teknologi yang baik dan rangkaian penyampaian kandungan yang kukuh, Google terus menjadikan tapak web dipertingkatkan AMP lebih pantas. Walau bagaimanapun, AMP juga berfungsi secara tidak langsung dengan menggalakkan kami melihat pengoptimuman dan amalan terbaik yang terkandung dalam AMP. Walaupun anda tidak bercadang untuk menjadikan tapak anda serasi AMP, adalah berguna untuk memahami AMP sebagai senarai tugasan untuk mengoptimumkan tapak bukan AMP.

Salah satu pengoptimuman dalam senarai ini ialah teknik yang dipanggil "pemuatan malas", yang kami lihat dalam tindakan dalam artikel terbaru kami tentang menggunakan elemen tersuai AMP. Dengan teknik ini, hanya imej di dalam atau berhampiran port pandangan dimuatkan apabila pelawat mula-mula tiba di halaman. Apabila pelawat menatal ke bawah, seluruh halaman dicetuskan untuk dimuatkan.

Pemuatan malas membolehkan pelawat mula berinteraksi dengan kandungan anda dengan lebih pantas, manakala kelajuan pemuatan yang dipertingkatkan boleh meningkatkan kedudukan enjin carian anda. Lebih banyak imej yang anda ada pada halaman, lebih besar peningkatan kelajuan yang anda akan dapat.

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

Dalam tutorial ini, kita akan belajar cara menggunakan pemuatan malas pada tapak web bukan AMP menggunakan skrip yang dipanggil Layzr.js. Kami akan meniru kefungsian elemen <amp-img></amp-img> AMP sebanyak mungkin, tetapi kami juga akan menggunakan beberapa ciri khusus untuk Layzr. <amp-img></amp-img> 元素的功能，但我们还将使用 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; ，以便我们稍后添加的图像将居中。

加载 Layzr

layzr.js 脚本有两个方便您加载的 CDN 源 - 我们将使用来自 Cloudfare 的一个。

将此代码添加到您的 html 中，位于结束

Atas ialah kandungan terperinci Siapa yang memerlukan AMP? Permudahkan proses malas memuatkan imej responsif dengan Layzr.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css chrome html auto 继承 JS dom 选择器 position margin padding background github https 搜索引擎

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bolehkah JavaScript digunakan untuk pembangunan Android?Artikel seterusnya：Bolehkah JavaScript digunakan untuk pembangunan Android?

Artikel berkaitan

Lihat lagi