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

js图片延迟加载的实现方法及思路

作者：拾光

时间：2026-10-27

浏览：466

本文详细解析了JavaScript实现图片延迟加载的核心思路。主要步骤包括在页面加载前预处理图片源，利用scroll事件监听滚动位置，并通过累加offsetParent计算元素相对于文档的绝对坐标。文章重点解决了浮动或绝对定位导致的定位偏差问题，并提供了兼容IE、Chrome等浏览器的滚动条位置获取及图片显示逻辑的完整代码。

文章目录

js图片延迟加载的实现方法及思路

实现图片延迟加载的基本思路如下：


在页面load事件触发之前，遍历指定id元素下的所有img标签，将其真实图片路径存入自定义的_src属性中，并将src属性替换为占位图。


随后，监听document.body的scroll事件，在滚动发生时遍历所有待加载图片，计算其是否进入浏览器可视窗口。若进入可视区域，则将_src的值赋给src，从而触发图片加载。


关键难点在于准确计算img元素相对于页面的绝对位置。通常使用offsetLeft和offsetTop，但这两个属性返回的是相对于offsetParent元素的相对坐标。如果父级元素存在浮动或绝对定位，直接获取的坐标将不准确。


为此，本文采用累加元素所有父级元素的offsetTop值的方法，来计算文档中的绝对位置。


具体实现代码如下：

//获取元素相对于页面的绝对X坐标
var getLeft = function(El){
var left = 0;
do{
left += El.offsetLeft;
}while((El = El.offsetParent).nodeName != 'BODY');
return left;
        };
//获取元素相对于页面的绝对Y坐标
var getTop = function(El){
var top = 0;
do{
top += El.offsetTop;
}while((El = El.offsetParent).nodeName != 'BODY');
return top;
        };

在绑定窗口scroll事件时，需注意浏览器差异：IE浏览器通常使用document.documentElement，而其他现代浏览器则使用document。


接下来需要获取浏览器可视窗口相对于文档的位置，以便判断图片是否进入视野。相关代码如下：


具体代码如下：

//获取滚动条位置及浏览器窗口显示尺寸
var top = isGoo ? document.body.scrollTop : document.documentElement.scrollTop,
left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft,
width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight;

需要注意的是，Chrome浏览器需要通过body获取scrollTop，而其他浏览器则通过documentElement获取。


最后，遍历所有图片，判断其位置是否在可视区域内，并执行显示操作。


相关代码如下：

//批量判断所有图片是否在浏览器显示区域内
for(var i=0 ; i < imgs.length; i++){
var _top = getTop(imgs[i]),_left = getLeft(imgs[i]);
//判断图片是否在显示区域内
if( _top >= top &&
_left >= left &&
_top <= top+height &&
_left <= left+width){
var _src = imgs[i].getAttribute('_src');
//若图片尚未显示，则进行赋值
if(imgs[i].src !== _src){
imgs[i].src = _src;
                    }
                }
            }

以下为可运行的完整示例代码：


具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>js图片延迟加载</title>
</head>
<body>
<table id="out1" style="height:2450px;">
<tr>
<td><img src="https://www.jb51.net/small/2011_4_22/photo163115955184917.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_4_13/photo163175537548397.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/small/2011_4_16/photo16314557927776.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_4_10/photo1631932180569094.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/small/2011_4_1/photo1630540642223.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_4_2/photo1638657445827.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/small/2011_3_29/photo16384188604.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_29/photo16384188604.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/small/2011_4_13/photo16311444254618471.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_15/photo16318118126415.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16310513957332.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/small/2011_3_14/photo163103452142757.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16310310447460.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/small/2011_3_14/photo163103347259334.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/small/2011_3_14/photo163102333593532.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16323618120479.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16323942409450.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_15/photo1630653584606.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/small/2011_3_12/photo163233846816799.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_13/photo16313216736705.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/small/2011_3_1/photo16313391752186220.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_1/photo163765186092776.jpg" alt="" /></td>
</tr>
</table>
<table id="out2" style="width:4883px">
<tr>
<td><img src="https://www.jb51.net/small/2011_4_22/photo163115955184917.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_4_13/photo163175537548397.jpg" alt="" /></td>
<td><img src="https://www.jb51.net/small/2011_4_16/photo16314557927776.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_4_10/photo1631932180569094.jpg" alt="" /></td>
<td><img src="https://www.jb51.net/small/2011_4_1/photo1630540642223.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_4_2/photo1638657445827.jpg" alt="" /></td>
<td><img src="https://www.jb51.net/small/2011_3_29/photo16384188604.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_29/photo16384188604.jpg" alt="" /></td>
<td><img src="https://www.jb51.net/small/2011_4_13/photo16311444254618471.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_15/photo16318118126415.jpg" alt="" /></td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16310513957332.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo163103452142757.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16310310447460.jpg" alt="" /></td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo163103347259334.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo163102333593532.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16323618120479.jpg" alt="" /></td>
<td><img src="https://www.jb51.net/small/2011_3_14/photo16323942409450.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_15/photo1630653584606.jpg" alt="" /></td>
<td><img src="https://www.jb51.net/small/2011_3_12/photo163233846816799.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_13/photo16313216736705.jpg" alt="" /></td>
<td><img src="https://www.jb51.net/small/2011_3_1/photo16313391752186220.jpg" alt="" /> </td>
<td><img src="https://www.jb51.net/small/2011_3_1/photo163765186092776.jpg" alt="" /></td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
function delayload(option){
//读取参数
//图片未加载时显示的占位图路径
var src = option.src ? option.src : '',
//指定哪些id下的img元素使用延迟加载
id = option.id ? option.id : [];
//图片列表数组
var imgs = [];
//获取所有目标图片元素
for(var i=0 ; i < id.length ; i++){
var idbox = document.getElementById(id[i]),_imgs;
if(idbox && (_imgs = idbox.getElementsByTagName('img'))){
for(var t=0 ; t < _imgs.length ; t++){
imgs.push(_imgs[t]);
                    }
                }
            }
//将所有图片设置为指定的loading占位图
for(var i=0 ; i < imgs.length ; i++){
//将图片原始路径存入_src属性
imgs[i].setAttribute('_src',imgs[i].src);
imgs[i].src = src;
            }
//获取元素相对于页面的绝对X坐标
var getLeft = function(El){
var left = 0;
do{
left += El.offsetLeft;
}while((El = El.offsetParent).nodeName != 'BODY');
return left;
            };
//获取元素相对于页面的绝对Y坐标
var getTop = function(El){
var top = 0;
do{
top += El.offsetTop;
}while((El = El.offsetParent).nodeName != 'BODY');
return top;
            };
//判断是否为IE浏览器并获取版本号
var isIE = !!navigator.userAgent.match(/MSIE\b\s*([0-9]\.[0-9]);/img);
isIE && (isIE = RegExp.$1);
//判断是否为Chrome浏览器
var isGoo = !!navigator.userAgent.match(/AppleWebKit\b/img);
//获取可触发scroll事件的对象
var box = isIE ? document.documentElement : document;
//绑定body元素的scroll事件
var onscroll = box.onscroll = function(){
//读取滚动条位置和浏览器窗口显示尺寸
var top = isGoo ? document.body.scrollTop : document.documentElement.scrollTop,
left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft,
width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight;
//批量判断所有图片是否在浏览器显示区域内
for(var i=0 ; i < imgs.length; i++){
var _top = getTop(imgs[i]),_left = getLeft(imgs[i]);
//判断图片是否在显示区域内
if( _top >= top &&
_left >= left &&
_top <= top+height &&
_left <= left+width){
var _src = imgs[i].getAttribute('_src');
//如果图片尚未显示，则进行赋值
if(imgs[i].src !== _src){
imgs[i].src = _src;
                        }
                    }
                }
            };
var load = new Image();
load.src = src;
load.onload = function(){
onscroll();
            };
        }
delayload({id:['out1','out2'],src:'//img.jbzj.com/file_images/article/201307/2013072210300234.jpg'});
</script>

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

JS怎么使用展开运算符合并对象

ES6+环境下判断JS对象为空的简洁写法

怎么通过replacer函数自定义JS中JSON的格式化输出

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

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