使用 jQuery 延迟加载图像

17 Mar 2025 | 4 分钟阅读

在本文中，我们将借助 jQuery 来实现图片的懒加载。首先，我们将学习 jQuery 的基础知识。之后，我们将学习懒加载图片的基础知识。

什么是 jQuery？

jQuery 是一个快速、轻量级、小巧且功能丰富的 JavaScript 库。要将 jQuery 添加到 HTML 页面，我们可以使用 <script> 标签。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>

在此，src 属性是我们可以添加 jQuery 来源的地方。

您也可以下载 jQuery 并将 jQuery 的来源添加到 <script> 标签的 src 属性中。

在 jQuery 中，懒加载图片是什么意思？

在 jQuery 中，懒加载图片是一种在 Web 和应用程序中的技术，它将页面上图片的加载推迟到稍后时间——当这些图片真正需要时。通过使用此功能，我们可以减少网页的初始加载时间。

让我们来看几个使用 jQuery 实现懒加载图片的例子。

示例 1

<! DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content=
		"width = device-width, initial-scale=1.0">
	<title> Example lazy load images using jQuery </title>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
h1 {
  line-height: 2em; 
  padding-bottom: 15px;
  text-transform: none;
  font-size: 2em;
  font-weight: bold;
  font-style: italic; 
  font-family: "Playfair Display", "Bookman", serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
body { 
	height: 100%; width: 100%; 
	background-image: 
	linear-gradient(to right, firebrick, darkorange);
	background-size: 100% 15%;
	color: whitesmoke; 
	font-size: 16px; 
	font-family: 'Lato';
} 
</style>
<body>
	<h1> Example lazy load images using jQuery </h1>
	<img src="5.png"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" />
	<img src="6.png"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" />
	<img src="1.png"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" />
             <img src="4.png""
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" />
<img src="6.png"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" />
<img src="4.png"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" />

</body>
</html>

说明

在上例中，我们创建了一个懒加载的例子，为此我们使用了 `loading` 属性设置为 `lazy`。

<img src="4.png" alt="numbers" loading="lazy" width="300" height="300"
style="display:block; margin:10px" />

lazy-load-images-using-jquery

输出

以下是此示例的输出。

示例 2

<! DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content=
		"width = device-width, initial-scale=1.0">
	<title> Example lazy load images using jquery </title>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
h1 {
  line-height: 2em; 
  padding-bottom: 15px;
  text-transform: none;
  font-size: 2em;
  font-weight: bold;
  font-style: italic; 
font-family: "Playfair Display", "Bookman",serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
body { 
	height: 100%; 
          width: 100%; 
	background-image: 
	linear-gradient(to right, firebrick, darkorange);
	background-size: 100% 15%;
	color: whitesmoke; 
	font-size: 16px; 
	font-family: 'Lato';
} 
</style>
<body>
	<h1> Example lazy load images using jQuery </h1>
<img src="4.png" alt="Paris" style="width: 30%" loading="lazy">
<img src="5.png" alt="Paris" style="width: 30%" loading="lazy">
<img src="4.png" alt="Paris" style="width: 30%" loading="lazy">
<img src="5.png" alt="Paris" style="width: 30%" loading="lazy">
<img src="2.png" alt="Paris" style="width: 30%" loading="lazy">
<img src="4.png" alt="Paris" style="width: 30%" loading="lazy">
<img src="6.png" alt="Paris" style="width: 30%" loading="lazy">
</body>
</html>

说明

在上例中，我们创建了一个懒加载的例子，为此我们使用了 `loading` 属性设置为 `lazy`。

输出

以下是此示例的输出。

示例 3

<! DOCTYPE html>
<html>
  <head>
<meta charset="UTF-8">
	<meta name="viewport" content=
		"width = device-width, initial-scale=1.0">
    <title> lazy load images using jQuery </title>
    <style>
      img {
        width: 500px;
        height: 350px;
        display: block;
        margin: 10px auto;
      }
	  @import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
body { 
	height: 100%; width: 100%; 
	background-color: #333; 
	color: whitesmoke; 
	font-size: 16px; 
	font-family: 'Lato';
} 
	 h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: white;
  text-align: center;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
    </style>
  </head>
  <h1> Example lazy load images using jquery </h1>
  <body>
    <img class="lazy-load" data-src="5.png">
    <img class="lazy-load" data-src="6.png">
    <img class="lazy-load" data-src="4.png">
  <img class="lazy-load" data-src="5.png">
     <img class="lazy-load" data-src="6.png">
  <img class="lazy-load" data-src="2.png">
	  <img class="lazy-load" data-src="5.png">
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        let lazyloadImages = document.querySelectorAll("img.lazy-load");
        let lazyloadThrottleTimeout;
        function lazyload() {
          if(lazyloadThrottleTimeout) {
            clearTimeout(lazyloadThrottleTimeout);
          }
          lazyloadThrottleTimeout = setTimeout(function() {
            let scrollTop = window.pageYOffset;
            lazyloadImages.forEach(function(img) {
              if(img.offsetTop < (window.innerHeight + scrollTop)) {
                img.src = img.dataset.src;
                img.classList.remove('lazy');
              }
            });
            if(lazyloadImages.length == 0) {
              document.removeEventListener("scroll", lazyload);
              window.removeEventListener("resize", lazyload);
              window.removeEventListener("orientationChange", lazyload);
            }
          }, 20);
        }
        document.addEventListener("scroll", lazyload);
        window.addEventListener("resize", lazyload);
        window.addEventListener("orientationChange", lazyload);
      });
    </script>
  </body>
</html>

说明

在上例中，我们创建了一个懒加载的例子，为此我们使用了 `class = "lazy-load"`。

输出

以下是此示例的输出。

下一主题使用 jQuery 创建井字棋游戏

使用 jQuery 延迟加载图像

什么是 jQuery？

在 jQuery 中，懒加载图片是什么意思？

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 jQuery 延迟加载图像

什么是 jQuery？

在 jQuery 中，懒加载图片是什么意思？

示例 1

示例 2

示例 3

相关帖子

JQuery 排序

带有缩略图的 JQuery 照片库

在 jQuery 的下拉菜单中获取选定的值

如何使用 jQuery 更改背景图片

使用 JQuery Ajax 动态添加删除输入字段

JQuery UI 控件组

使用 JQuery Ajax 的动态拖放表行

使用 moment JS 更改 jquery 中的日期格式

使用 jQuery 的 Gauge 图表插件

JQuery 验证

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器