js实现图片懒加载

最新推荐文章于 2025-06-09 22:33:46 发布
原创 最新推荐文章于 2025-06-09 22:33:46 发布 · 452 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

最近复习下js、简单实现一下图片的懒加载

思路其实很简单：

页面的img默认加载一张lodaing图片、速度会快一点、其他图片当显示在当前窗口的时候再获取data-src属性的值设置

到图片的src属性当中加载图片。

Demo：http://www.bright2017.top/test1/test1-32/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片懒加载</title>
		<style type="text/css">
			.demo {
				text-align: center;
			}

			img {
				width: 130px;
				height: 140px;
			}
		</style>
	</head>
	<body>

		<div class="demo">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
			<img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg">
		</div>

		<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
		<script type="text/javascript">
			$(function() {
				$(window).scroll(function() {
					handscroll();
				});

				function handscroll() {
					let imgs = $("img[data-src]");
					let bodyScrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
					let windowHeight = window.innerHeight;
					for (let k = 0; k < imgs.length; k++) {
						let imgHeight = $(imgs[k]).offset().top;
						let imgData = $(imgs).eq(k).attr("data-src");
						if (imgHeight < (bodyScrollHeight + windowHeight) && imgHeight >= bodyScrollHeight) {
							setTimeout(function() {
								$(imgs).eq(k).attr("src", imgData);
							}, 1000);
						}
					}
				}
				// 页面默认加载图片
				handscroll();
			});
		</script>
	</body>
</html>

您的支持是对我最大的鼓励。

最全的图片懒加载的实现
高山景行，一尘不染
12-21 352
懒加载(Lazy-Load)。它是针对图片加载时机的优化：在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象，因为图片真的太多了，一口气处理这么多任务，浏览器做不到啊！ 目的 懒加载 的目的是当页面的图片进入到用户的可视范围之内在加载图片的一种优化方式。 可以增加首屏加载的速度，毕竟，用户点开页面的瞬间，呈现给他的只是首屏，我们只要把首屏的资源图片加载处理就可以了，至于下面的图片，当用
【JavaScript】懒加载
m0_49442965的博客
12-01 954
【代码】【JavaScript】懒加载。
js图片懒加载插件
02-10
好用的图片懒加载库
介绍图片懒加载的几种实现方法
weixin_52648900的博客
05-28 1794
介绍图片懒加载的几种实现方法
如何通过 HTML 实现图片懒加载？＜picture＞ 标签和 srcset 属性的作用是什么？
最新发布
前端大白话
06-09 2282
前端打工人的日常，除了改需求、修bug，最头疼的大概是——用户抱怨页面加载慢，打开首页要等3秒，滚动时图片"唰"地一下蹦出来，布局抖得像在跳广场舞。今天咱们就聊聊HTML里的"图片救星"：**懒加载**、`<picture>`标签和`srcset`属性，用最接地气的话讲清原理和用法，看完这篇，你不仅能优化页面加载速度，还能和面试官唠明白背后的逻辑～
JS实现页面数据懒加载
11-20
页面数据懒加载。Div移动到可视区域再去ajax加载内容。 最近有需求做页面的多个table用于加载数据，但是用户浏览页面的时候不需要一次将页面所有的东西加载出来，比如页面上3个table就占满了，用户点进去第一眼也就只能看到3个。为了防止一次加载拖慢了页面的速度，所以之后的table我们要懒加载。即该table移动到了可视区域再去异步请求加载数据。 以下为目前实现的方法： <!-- page lazyloading --> [removed] $(function(){ // 设置布尔值用于判断是否该DIV到达过可视区域 var scrollflaga = true; // 监听滚
原生JS实现图片懒加载之页面性能优化
10-17
本文将深入探讨如何使用原生JavaScript实现图片懒加载，以及这种方式如何帮助优化页面性能。 一、图片懒加载原理 1. 数据存储：首先，我们需要为图片`<img>`标签添加一个自定义属性，如`data-src`，用来存储实际的...
js实现图片懒加载效果
10-19
在本文中，我们关注的是如何利用js实现图片懒加载效果。实现图片懒加载的关键在于判断哪些图片需要立即加载，哪些图片可以延迟加载。通常的做法是监听滚动事件，结合图片距离视窗顶部的位置来决定何时加载图片。 ...
原生JS实现图片懒加载(lazyload)实例
10-19
总结，原生JavaScript实现图片懒加载主要涉及以下几个步骤： 1. 设置默认占位图和实际图片URL。 2. 监听滚动事件，并使用节流函数控制处理频率。 3. 在滚动事件处理函数中，判断图片是否进入可视区域，如果是，则...
JavaScript实现图片懒加载(Lazyload)
10-21
在讨论如何使用JavaScript实现图片懒加载前，我们先来了解为什么需要图片懒加载。 首先，页面加载速度受到多种因素的影响，其中图片无疑是一个重要的因素。现代网页中的图片往往尺寸较大，质量高，这就导致单个图片...
JS实现图片懒加载(lazyload)过程详解
10-15
在JavaScript中实现图片懒加载的基本步骤如下： 1. **设置初始状态**： - 图片的`src`属性应设置为一张小图（通常为占位符或者loading图片），如`default.jpg`。 - 使用一个自定义属性，如`data-src`，存储真实...
js前端实现图片懒加载(lazyload)的两种方式
10-19
本篇文章主要介绍了js前端实现图片懒加载(lazyload)的两种方式 ，使用图片懒加载可以提高网页运行速度，有兴趣的可以了解一下。
js---《实现图片的懒加载》
AAAXEC的博客
11-09 1227
定义：当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。作用： 减少或延迟请求数，缓解浏览器的压力，增强用户体验 如何实现： 1.设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址 2.页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中 3.当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址
js实现图片的懒加载
weixin_45966674的博客
03-11 508
前端js实现页面图片懒加载 前端技术发展至今，我们对性能的追求不断提升，不断变化的是技术，但我们对用户体验的极致追求却始终如一。 所有前端(特别是soe除了类)都会因图片的加载而发愁，图片作为巨大的请求信息类，用时巨大。 那我们该如何处理呢? 这就涉及到了图片懒加载 所谓懒加载其实就是一种视觉欺骗 我们先去掉所有图片的src 将其改成 data-src <img data-src = "images/case/Exhibition.png"/> 因为没有src属性存在 页面就不会发送异
js图片懒加载
qq_42450901的博客
08-19 292
Document *{ margin: 0;padding:0;list-style: none; } ul{ overflow: hidden; width: 800px; margin:0 auto; } li{ w...
JS图片懒加载
Grand.的博客
04-06 447
JS图片懒加载
JS | 详解图片懒加载的6种实现方案
青春木鱼的博客
10-23 5217
要实现图片的懒加载，核心的方法包括：利用JavaScript监听滚动事件、通过getBoundingClientRect()判断图片是否进入可视区域、使用Intersection Observer API、结合data属性暂存图片地址。在现代浏览器中，推荐使用Intersection Observer API来实现图片的懒加载，因为它相比传统的事件监听方式更为高效且易于维护。
JS实现图片的懒加载
jinxing1025的专栏
12-16 1808
为什么使用图片懒加载 当一个网站有很多图片资源时，如果一起加载会使网页加载很慢，影响用户体验，而且服务器的压力也会很大。 懒加载的原理是什么 img标签如果没有src属性，浏览器就不回去发送请求下载图片，只有当通过JavaScript设置了src属性后，浏览器才会发送请求下载图片。我们可以通过"data-*"给img自定义一个属性，比如“data-src”，将图片的真实地址保存到自定义属性中，当元...
原生JavaScript实现图片懒加载技术详解
使用原生JavaScript实现图片懒加载涉及到以下几个关键步骤和技术点： 1. **设置占位图**: 在图片实际内容加载之前，可以使用一张占位图来代替，这主要是为了保证页面的布局不会因为图片的延迟加载而产生重排和重绘...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值