原生JS实现图片懒加载（详解）————小白都能看的懂

最新推荐文章于 2024-03-17 23:17:34 发布
最新推荐文章于 2024-03-17 23:17:34 发布
阅读量608 收藏 4
点赞数 4
文章标签： 前端优化之图片懒加载 图片懒加载 原生图片懒加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43809685/article/details/94411342
版权

原生JS实现图片懒加载（详解）—— 小白都能看的懂

什么是图片懒加载：

图片懒加载，通俗一点就是图片的延迟加载。它是页面性能优化的一种手段，在加载页面时通过只显示可视区域的图片，避免了页面因图片过多而使得页面加载缓慢甚至卡顿的问题。

实现的基本原理：

通过判断当前图片的【offsetTop】值，来动态添加【img】标签，设置【img】标签的【src】属性。
我们知道了什么是图片懒加载和它实现的基本原理，接下来就来实践一下。

先看看html结构 ：

<body>
	<ul>
	        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
	        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
	        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
	        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
	        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
	        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
	        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
	        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
	        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
	        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
	        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
	        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
	        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
	        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
	        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
	        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
	        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
	        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
	        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
	        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
	        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
	        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
	        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
	        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
	        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
	        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
	        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
	        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
	        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
	        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
	        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
	        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
	        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
	        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
	        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
	        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
	        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
	        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
	        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
	        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
	        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
	        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
	        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
	        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
	        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
	        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
	        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
	        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
	        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
	        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
	        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
	        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
	        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
	        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
    </ul>
</body>

这里为【li】设置一个属性【data-src】将图片的路径赋值给data-src这里我使用的是网页图片，【i】标签是一个显示加载的样式。

这里在优化一下页面，加入css：

<style>
	*{margin:0;padding:0;}
        ul{overflow:hidden;}
        li{list-style:none;width:10rem;height:12rem;border:1px solid #ccc;box-sizing:border-box;-webkit-box-sizing:border-box;float:left;overflow:hidden;position:relative;}
        li i{width:20px;height:20px;border-radius:20px;position:absolute;border:2px solid #6feb95;z-index:0;left:50%;top:50%;margin-top:-11px;margin-left:-11px;animation:move 1s infinite;-webkit-animation:move 1s infinite;}
        li i:before{position:absolute;width:5px;height:5px;border-radius:4px;content:'';box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;background:#fff;border:1px solid #fff;top:-3px;left:50%;margin-left:-3px;}
        img{vertical-align:middle;border-width:0;width:100%;position:relative;z-index:1;}
        @keyframes move{
            0%{
                transform:rotateZ(0);
            }
            100%{
                transform:rotateZ(360deg);
            }
        }
        @-webkit-keyframes move{
            0%{
                -webkit-transform:rotateZ(0);
            }
            100%{
                -webkit-transform:rotateZ(360deg);
            }
        }
</style>

*接下来就是我们的重点JS部分了*：

<script>
	

// 获取 DOM 中在这里插入代码片的所有 li 标签
   	var li=document.querySelectorAll('li');
   	
   	// 当页面滚动时触发 onscroll 方法
   	window.onscroll=function(){
   	
   		// 获取当前页面的高度(包括页面划过的区域)
       	var height=document.documentElement.clientHeight+(document.body.scrollTop || document.documentElement.scrollTop)
       	setTimeout(function(){
       		// 循环遍历所有的 li 标签
            for (let i=0;i<li.length;i++){
            
       		// 判断每一个li距离页面的高度，当它小于页面高度时说明当前的li正处于可视区域或已被划过
                if(li[i].offsetTop<height){	
                	
                	// 为满足条件的 li 内添加img标签
                    var img=document.createElement('img')	// 动态创建img标签
                    
                    var imgurl=li[i].getAttribute('data-src')	// 获取满足条件的li的data-src属性的属性值
                    if(li[i].children.length<=1){
                    
                        img.src=imgurl;  // 给创建的img标签添加src属性
                        li[i].appendChild(img)	// 最后追加到li标签中
                        
                    }
                }
            }
       	},1000)   // 设置页面滚动后1s后加载图片
    }
    onscroll() // 页面加载时先加载一次onscroll方法，让页面先加载一部分图片

</script>

原理图：
在这里插入图片描述
到这里就全部结束了，通过这种方式可以实现简单的图片懒加载。。。。
下一章→ 图片预加载。

很菜的小白在分享
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【JavaScript】懒加载
m0_49442965的博客
12-01 783
【代码】【JavaScript】懒加载。
JS中三种实现懒加载的方法！
weixin_74535649
08-10 3521
JS中三种实现懒加载的方法！
JavaScript实现懒加载
weixin_51422386的博客
12-05 3051
项目性能优化
JS基础 | 实现懒加载
m0_73460278的博客
08-28 731
懒加载：只在数据或内容即将进入视口或即将需要的时候才加载。
JavaScript中的懒加载——概念，作用，原理，实现步骤，以及3种原生js实现方式
王春燕的博客
04-20 5439
1.什么是懒加载？ 懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图）， 只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 2.为什么要使用懒加载？ 很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。 要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。 3.懒加载的
JS实现懒加载以及加载进度实现 - 手把手从页面到核心详解
q145p152的博客
06-23 1931
前端懒加载技术对于现在来说已经是屡见不鲜，那我们需要知道在什么场景下需要用到懒加载，比如某宝，某东等首页展示，在其浏览商品的时候是可以无限滚动加载的，以及大量的图文展示，也需要用到懒加载，其目的就是为了减轻浏览器渲染的压力从而提升用户体验，按量渲染，而不是嗖的一下把压力全部给到浏览器。
原生JS实现图片懒加载之页面性能优化
10-17
原生js实现图片懒加载 *{ margin: 0; padding: 0; box-sizing: border-box; } ul{ overflow: hidden; list-style: none; } li{ float: left; width: 50%; height: 200px; padding: 10px; } li img{ display: ...
原生JS实现图片懒加载(lazyload)实例
10-19
原生JavaScript实现的图片懒加载方案并不复杂，但需要理解其核心原理和关键代码。 首先，实现懒加载的基本思路是：在页面初始化时，非首屏的图片的`src`属性设置为一个默认的占位符，如加载中的图片或者一张小尺寸...
原生javaScript实现图片延时加载的方法
10-25
主要介绍了原生javaScript实现图片延时加载的方法,无需通过载入jQuery脚本即可实现图片的延时加载效果,是非常实用的技巧,需要的朋友可以参考下
js实现图片懒加载，图片预加载
小龚的博客
03-22 4937
欢迎点击: 个人官网博客 预加载(进度) 比如一些公众号h5宣传页面，受网速影响，页面加载素材的时间比较长，页面会出现短时间的错乱或者闪屏； 进入页面的时候把图片全加载一遍，就不会出现图片加载慢显示慢的情况 效果图： <script> //页面所有img标签的集合 let img = document.getElementsByTagName("img"); function yuLoad() { let index = 0 for
js延迟加载，懒加载实现
qq_41537593的博客
06-21 456
在 JavaScript 中，可以使用一些方法来实现延迟加载，延迟加载的核心思想是在用户需要数据时才进行加载，从而提高网页的响应速度。
JavaScript的懒加载处理
杜永康的博客
10-12 1783
懒加载（Lazy Loading）是一种优化技术，它可以延迟加载某些资源，直到它们真正需要被使用的时候才进行加载。这种技术可以提升应用程序或网站的性能，减少初始加载时间。
原生js实现图片懒加载
weixin_43435271的博客
01-04 480
实现图片懒加载
js 控制一次加载一张图片，加载完成后再加载下一张
前端小99的博客
09-07 645
【代码】js 控制一次加载一张图片，加载完成后再加载下一张。
五分钟教你用JS实现前端优化之懒加载与预加载
最新发布
MCM0115的博客
03-17 1359
快速解决理解什么是懒加载和预加载！通俗易懂max版
图片懒加载的实现方法
triggerV的博客
03-12 664
图片懒加载的常见实现方法
【JavaScript】实现懒加载的两种方式
z914020826的博客
12-24 198
懒加载是一种优化网页性能的前端技术，它的主要目的是按需加载页面资源，而不是一次性加载所有内容。这种方法通过推迟加载页面中的资源（如图片）来减少初始页面加载时间，从而减轻服务器负担和带宽压力，加快页面加载速度。例如，在开发图片数量众多的长网页时，通常先加载视口内的几张图片。随着用户滚动页面，位于视口外的图片会在滚动到其位置时才加载。这种方式就是懒加载。实现懒加载的方法通常有两种：一种是通过监听onscroll事件，另一种是使用接口。
js图片懒加载原理、实现及节流优化
m0_45382009的博客
02-27 2087
1.懒加载原理 在图片没有进入可视区域时，先给的src一个默认加载的图片，这样浏览器就不会发送请求了，等到图片进入可视区域再把真实的图片路径data-src给src。 2.具体实现 1. 效果 2. 代码如下： <style> .imgList{ width: 600px; } .lazy { width: 600px; } </style> <body>
3种Javascript图片预加载的方法详解
sdasadasds的博客
05-25 2516
3种Javascript图片预加载的方法详解 预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。 这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。 方法一：用css和JavaScript实现预加载 实现预加载图片有很多方法，包括使用css、JavaScript及两者的各种组合。这些技术可根据不同设计
原生js实现图片懒加载的源码
03-29
以下是原生js实现图片懒加载的源码： ```javascript // 获取所有需要懒加载的图片元素 const lazyImages = document.querySelectorAll("img.lazy"); // 判断图片是否在可视区域内 function isInViewport(image) { const rect = image.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } // 加载图片 function loadImage(image) { image.src = image.dataset.src; image.classList.remove("lazy"); } // 监听window的滚动事件 window.addEventListener("scroll", function () { // 遍历需要懒加载的图片元素 for (const image of lazyImages) { if (isInViewport(image)) { loadImage(image); } } }); ``` 首先，我们获取所有需要懒加载的图片元素： ```javascript const lazyImages = document.querySelectorAll("img.lazy"); ``` 接着，我们定义一个函数`isInViewport`用于判断图片是否在可视区域内。该函数会返回一个布尔值，表示图片是否在可视区域内： ```javascript function isInViewport(image) { const rect = image.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } ``` 然后，我们定义一个函数`loadImage`用于加载图片。该函数会将图片的`src`属性设置为`data-src`属性的值，并移除`lazy`类： ```javascript function loadImage(image) { image.src = image.dataset.src; image.classList.remove("lazy"); } ``` 最后，我们监听`window`的滚动事件，遍历所有需要懒加载的图片元素，如果图片在可视区域内，则调用`loadImage`函数加载图片： ```javascript window.addEventListener("scroll", function () { for (const image of lazyImages) { if (isInViewport(image)) { loadImage(image); } } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值