当前位置：首页 > 全部内容 > 正文

JavaScript实现图片懒加载提升网页打开速度

作者：缓存笔记

时间：2026-10-29

浏览：433

本文介绍一种基于JavaScript的图片懒加载方案，通过将非首屏图片路径暂存于data-src属性，利用透明占位图维持布局。当页面滚动触发可视区域判断时，动态替换src属性并移除data-src，从而显著减少初始加载资源，提升大型网站尤其是电商页面的打开速度。

文章目录

图片懒加载原理与优势

在浏览图片密集的大型网站（如电商平台）时，用户常观察到一种现象：只有当滚动到第二屏及更下方时，图片才会开始加载。这种按需加载的策略避免了初始阶段一次性加载所有图片资源，从而显著提升了网页的首屏打开速度。以下是目前总结的一种实现思路，欢迎交流更优方案。

基于data-src的实现机制

其实实时加载图片思路很简单，页面一开始加载的时候把不需要一开始就加载的图片（如第二屏以下的图片，反正是要往下滚动才能看到的，不如把它们设置成往下滚动的时候再实时加载）路径保持到一个自定义的属性里，如：<img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" alt="19岁女孩直面癌症 7年前曾截肢" />，src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"是一个1px*1px的透明gif图片，自定义属性data-src里的"http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"才是图片的路径，往下滚动到它的时候把data-src里的值替换掉src的值，然后把data-src属性移除掉……

具体实现可参考以下Demo。

首页固定布局实现Demo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片实时加载</title>
<style>
*{padding:0; margin:0;}
.wp{width:1000px; margin:5px auto; padding:10px 0; border-bottom:1px solid #dedede; overflow:hidden;}
ul li{ display:block; width:250px; float:left; margin:5px 0; list-style:none;}
.aimg{ display:block; height:300px; max-width:348px; border:1px solid #EEE; background:url(http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) no-repeat center center;}
</style>
</head>
<body>
<div class="wp">
<a href="http://www.cnblogs.com/xiaomou2014"><img src="http://pic.cnitblog.com/avatar/356740/20140716231521.png" alt="xiaomou2014的头像"></a>
<a href="http://www.cnblogs.com/xiaomou2014">http://www.cnblogs.com/xiaomou2014</a>
cont2开始的图片是实时加载的
</div>
<div class="cont1 wp">
<h2>cont1</h2>
<ul>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://e.hiphotos.baidu.com/image/w%3D310/sign=e0e3bb2e38292df597c3aa148c315ce2/c83d70cf3bc79f3d8cd19a31b8a1cd11728b29fa.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><img class="aimg" src="http://h.hiphotos.baidu.com/image/w%3D310/sign=19bbb515ff1f4134e037037f151e95c1/b7fd5266d016092414bd8aedd60735fae7cd34af.jpg" /></li>
<li><img class="aimg" src="http://g.hiphotos.baidu.com/image/w%3D310/sign=dbbeb83d4b540923aa69657fa258d1dc/b812c8fcc3cec3fdaa0ce16bd488d43f879427f9.jpg" /></li>
<li><img class="aimg" src="http://c.hiphotos.baidu.com/image/w%3D310/sign=8e78cf5936a85edffa8cf822795409d8/bba1cd11728b47108b5b5bc5c1cec3fdfc032346.jpg" /></li>
<li><img class="aimg" src="http://e.hiphotos.baidu.com/image/w%3D310/sign=75538617df54564ee565e23883de9cde/c2cec3fdfc039245ea8f5b0b8594a4c27d1e25ff.jpg" /></li>
<li><img class="aimg" src="http://d.hiphotos.baidu.com/image/w%3D310/sign=4e7eef2892ef76c6d0d2fd2aad17fdf6/a9d3fd1f4134970a9bed2d2697cad1c8a7865d18.jpg" /></li>
<li><img class="aimg" src="http://a.hiphotos.baidu.com/image/w%3D310/sign=22e5b431bc096b63811958513c328733/ac345982b2b7d0a224577783c9ef76094b369a15.jpg" /></li>
<li><img class="aimg" src="http://g.hiphotos.baidu.com/image/w%3D310/sign=d76eb55fb33533faf5b6952f98d2fdca/ac6eddc451da81cbf76dbf9c5066d016082431d3.jpg" /></li>
<li><img class="aimg" src="http://f.hiphotos.baidu.com/image/w%3D310/sign=7f41436edbf9d72a1764161ce42a282a/adaf2edda3cc7cd9e81d13883b01213fb80e91aa.jpg" /></li>
<li><img class="aimg" src="http://b.hiphotos.baidu.com/image/w%3D310/sign=d1e3fa4567380cd7e61ea4ec9145ad14/ae51f3deb48f8c54f573c0da38292df5e1fe7fa6.jpg" /></li>
<li><img class="aimg" src="http://e.hiphotos.baidu.com/image/w%3D310/sign=03c6a3c737fae6cd0cb4ad603fb10f9e/b151f8198618367a4e593d2d2c738bd4b21ce56a.jpg" /></li>
<li><img class="aimg" src="http://a.hiphotos.baidu.com/image/w%3D310/sign=2c2009a6d01b0ef46ce89e5fedc651a1/b219ebc4b74543a90ac4bb441c178a82b801145e.jpg" /></li>
</ul>
</div>
<div class="cont2 wp">
<h2>cont2</h2>
<ul>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://e.hiphotos.baidu.com/image/w%3D310/sign=655bcf71d31373f0f53f699e940f4b8b/86d6277f9e2f07089c207d0aeb24b899a901f297.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://d.hiphotos.baidu.com/image/w%3D310/sign=3629f39bad51f3dec3b2bf65a4eff0ec/94cad1c8a786c917d4016968cb3d70cf3bc75764.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://f.hiphotos.baidu.com/image/w%3D310/sign=8c009502257f9e2f70351b092f31e962/9922720e0cf3d7ca56401892f01fbe096a63a99b.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=f62f43b6ab773912c4268360c8198675/a1ec08fa513d269759c20d5657fbb2fb4316d8a3.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://e.hiphotos.baidu.com/image/w%3D310/sign=9ce0b545a918972ba33a06cbd6cc7b9d/a8773912b31bb051b4ef3a79347adab44bede09c.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=9d833f1b950a304e5222a6fbe1c9a7c3/d1160924ab18972bb49b4bd5e4cd7b899e510a0f.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=4a93da2a552c11dfded1b92253266255/d62a6059252dd42a007e1c62013b5bb5c8eab887.jpg" /></li>
</ul>
</div>
<div class="cont3 wp">
<h2>cont3</h2>
<ul>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://h.hiphotos.baidu.com/image/w%3D310/sign=71556df3d2160924dc25a41ae406359b/f703738da977391274b38fc4fa198618377ae2fa.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://d.hiphotos.baidu.com/image/w%3D310/sign=53e69395b8a1cd1105b674218913c8b0/ac4bd11373f08202f195e69a49fbfbedab641b0b.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://h.hiphotos.baidu.com/image/w%3D310/sign=3749c38a4334970a4773162ea5cbd1c0/5366d0160924ab1808b1ea9237fae6cd7a890beb.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://e.hiphotos.baidu.com/image/w%3D310/sign=8563bf5757fbb2fb342b5e137f4b2043/3b87e950352ac65cccb5d179f9f2b21193138a0c.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://f.hiphotos.baidu.com/image/w%3D310/sign=74856b065e6034a829e2be80fb1249d9/d000baa1cd11728baab06e25cafcc3cec3fd2c1c.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://c.hiphotos.baidu.com/image/w%3D310/sign=49e22cda34d12f2ece05a8617fc2d5ff/cdbf6c81800a19d88e30c90831fa828ba61e468f.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://d.hiphotos.baidu.com/image/w%3D310/sign=539b0d21347adab43dd01d42bbd5b36b/54fbb2fb43166d22e4c8ab9d442309f79052d278.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=5077c2c2c1cec3fd8b3ea174e689d4b6/4afbfbedab64034f9195fd08adc379310a551d67.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=50bdad348418367aad8979dc1e728b68/3c6d55fbb2fb43168dce1a6722a4462308f7d3de.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117fffd1e78/0bd162d9f2d3572ce86585518813632763d0c3bc.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338744eaf8ac9f.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://g.hiphotos.baidu.com/image/w%3D310/sign=75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b78941b2a34349b033bba42.jpg" /></li>
</ul>
</div>

<script>
//兼容IE对getElementsByClassName
if (navigator.appName == 'Microsoft Internet Explorer') {
document.getElementsByClassName = function() { 
var tTagName = "*"; 
if (arguments.length > 1) { 
tTagName = arguments[1]; 
} 
if (arguments.length > 2) { 
var pObj = arguments[2] 
} else { 
var pObj = document; 
} 
var objArr = pObj.getElementsByTagName(tTagName); 
var tRObj = new Array(); 
for ( var i = 0; i < objArr.length; i++) { 
if (objArr[i].className == arguments[0]) { 
tRObj.push(objArr[i]); 
} 
} 
return tRObj; 
} 
} 
//图片加载
function loadImg(imgClass,imgSrc){
//data-src:存放需要加载的图片的路径
var arrImg=document.getElementsByClassName(imgClass); //需要实时加载class为imgClass的图片数组
window.onscroll=function(){
for(var i=0; i<arrImg.length; i++){
if(!arrImg[i].getAttribute(imgSrc)) continue; 
if(document.documentElement.scrollTop+document.body.scrollTop+document.documentElement.clientHeight >arrImg[i].offsetTop){
arrImg[i].setAttribute("src",arrImg[i].getAttribute(imgSrc));
arrImg[i].removeAttribute(imgSrc);
}
}
}
}
loadImg("aimg","data-src");
</script>
</body>
</html>

内容页动态加载策略

在上述Demo中，cont1容器内的图片属于首屏固定布局内容，页面加载时即刻显示。对于首页等布局固定的场景，开发者可以预先识别哪些图片位于第二屏以下。然而，对于内容页，主体容器内的图片位置动态不可控，因此需要在整个页面加载完成后，通过判断图片是否在可视范围内来决定是否加载。虽然首页也可采用此动态判断方式，但在网速较慢时，等待整个页面结构加载完毕再显示图片会导致体验延迟，不如从上至下逐步加载直观。此外，必须为图片设置width和height属性，以确保在图片未加载前占据正确的空间位置，避免仅显示透明占位图的大小导致布局抖动。

针对内容页的Demo进行了相应调整，在window.onload和window.onscroll事件中均触发加载逻辑，确保页面初始化和滚动过程中图片能正确加载。

内容页滚动加载Demo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片实时加载</title>
<style>
*{padding:0; margin:0;}
.wp{width:1000px; margin:5px auto; padding:10px 0; border-bottom:1px solid #dedede; overflow:hidden;}
.fl{width:700px; padding:25px; float:left; border:1px solid #dedede; line-height:40px; overflow:hidden;}
.fr{width:220px; height:800px; float:right; background-color:#dedede;}
.aimg{ display:block; max-width:700px; margin:0 auto; background:url(http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) no-repeat center center;}
</style>
</head>
<body>
<div class="wp">
<a href="http://www.cnblogs.com/xiaomou2014"><img src="http://pic.cnitblog.com/avatar/356740/20140716231521.png" alt="xiaomou2014的头像"></a>
<a href="http://www.cnblogs.com/xiaomou2014">http://www.cnblogs.com/xiaomou2014</a>
</div>
<div class="wp">
<div class="fl">
<h2>7年前截肢的19岁癌症晚期女孩</h2>
<p>http://www.cnblogs.com/xiaomou2014</p>
<img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117fffd1e78/0bd162d9f2d3572ce86585518813632763d0c3bc.jpg" width="310" height="428" />
<p>http://www.cnblogs.com/xiaomou2014</p>
<img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338744eaf8ac9f.jpg" width="310" height="419" />
<p>http://www.cnblogs.com/xiaomou2014</p>
<img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://g.hiphotos.baidu.com/image/w%3D310/sign=75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b78941b2a34349b033bba42.jpg" width="310" height="428" />
<p>7年前截肢的19岁癌症晚期女孩</p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" alt="19岁女孩直面癌症 7年前曾截肢" width="640" height="480" /></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg" alt="19岁女孩直面癌症 7年前曾截肢" width="640" height="872" /></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a>
</div>
<div class="fr">
</div>
</div>

<script>
//兼容IE对getElementsByClassName
if (navigator.appName == 'Microsoft Internet Explorer') {
document.getElementsByClassName = function() { 
var tTagName = "*"; 
if (arguments.length > 1) { 
tTagName = arguments[1]; 
} 
if (arguments.length > 2) { 
var pObj = arguments[2] 
} else { 
var pObj = document; 
} 
var objArr = pObj.getElementsByTagName(tTagName); 
var tRObj = new Array(); 
for ( var i = 0; i < objArr.length; i++) { 
if (objArr[i].className == arguments[0]) { 
tRObj.push(objArr[i]); 
} 
} 
return tRObj; 
} 
} 
//图片加载
function loadImg(imgClass,imgSrc){
//data-src:存放需要加载的图片的路径
var arrImg=document.getElementsByClassName(imgClass); //需要实时加载class为imgClass的图片数组
for(var i=0; i<arrImg.length; i++){
if(!arrImg[i].getAttribute(imgSrc)) continue; 
if(document.documentElement.scrollTop+document.body.scrollTop+document.documentElement.clientHeight >arrImg[i].offsetTop){
arrImg[i].setAttribute("src",arrImg[i].getAttribute(imgSrc));
arrImg[i].removeAttribute(imgSrc);
}
}
}
window.onload=window.onscroll=function(){loadImg("aimg","data-src")}

</script>
</body>
</html>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

为什么JS调用reload后页面没有立即更新

crypto-js 加密结果与 Java/Python 后端不一致怎么解决

js文件缓存导致代码不更新怎么强制刷新

JS逆向调试技巧：编写Hook脚本监控加密函数输入输出

Babylon.js 性能优化技巧：实例化网格与遮挡剔除

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例