本文介绍如何使用jquery.lazyload.js插件实现网页图片的异步延迟加载。通过仅在用户滚动到可视区域时加载图片，有效减少首屏加载时间，提升页面打开速度和用户体验。文章提供了具体的配置代码、HTML属性修改方法及处理内容切换时的注意事项，适用于图片较多的网页场景。
图片异步延迟加载概述
提升网页加载速度的方法有很多，其中利用jquery.lazyload.js实现图片异步延迟加载，对于包含大量图片的网站而言，是提升页面打开速度的有效手段。以代码君网站栏目页列表左侧的PC端预览模块为例，文章略缩图展示模块的存在在一定程度上延长了网页加载时间。本文采用图片异步延迟加载的技术，旨在提升本站页面的加载速度。
图片异步加载的核心在于不必一次性加载并显示页面中的所有图片。当用户滚动滚动条至特定位置时，才加载并显示相应位置的图片。这种方式能显著提升网页加载速度，进而改善用户体验。
许多技术性文章的配图数量庞大，若要求网页打开时一次性加载所有图片，用户等待时间将大幅延长。这种做法不仅用户体验极差，且无必要一次性加载页面上所有图片。因此，图片异步延迟加载是网页设计中最合理且恰当的做法。
jquery.lazyload.js配置与使用
我们使用jquery.lazyload.js来实现图片异步延迟加载，请注意，在引入该插件前必须先载入jQuery库。
第一步：导入JS插件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
第二步：在页面中插入JavaScript代码。
$(document).ready(function($){
$("img").lazyload({
placeholder:"grey.gif", //加载图片前的占位图片
effect:"fadeIn" //加载图片使用的效果(淡入)
});
});
通过上述两步操作，即可简单实现网页图片的异步延时加载。
进一步详细介绍如下： 有时我们会发现一些大型网站，当页面包含大量图片时，只有当用户滚动到相应行时，当前行的图片才会即时加载。这意味着页面打开时仅加载可视区域内的图片，而隐藏区域的图片暂不加载，从而在一定程度加快了页面加载速度。对于较长的页面而言，这是一个较为理想的方案。
推荐：使用jquery图片延迟加载插件jquery.lazyload实现图片延迟。
实现原理与代码解析
实现原理如下：
将所有需要延时加载的图片修改为如下格式：
<img lazy_src="图片路径" border="0"/>
然后在页面加载时，将所有使用了lazy_src属性的图片保存到数组中。接着在滚动事件中计算可视区域的top值，将延时加载的图片中top值小于当前可视区域（即图片出现在可视区域内）的图片的src值替换为lazy_src的值，从而加载图片：
JS代码实现如下：
lazyLoad = (function() {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body;
var doc_element;
var lazy_load_tag;
function initVar(tags) {
doc_body = document.body;
doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement;
lazy_load_tag = tags || ["img", "iframe"];
};
function initElementMap() {
var all_element = [];
//从所有相关元素中找出需要延时加载的元素
for (var i = 0,
len = lazy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for (var j = 0,
len2 = el.length; j < len2; j++) {
if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) {
element_obj.push(all_element[key]);
}
}
}
for (var i = 0,
len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
//按距上距离保存一个队列
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++; //需要延时加载的图片数量
}
}
};
function initDownloadListen() {
if (!download_count) return;
var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;
//可视化区域的offtset=document的高+
var visio_offset = offset + doc_element.clientHeight;
if (last_offset == visio_offset) {
setTimeout(initDownloadListen, 200);
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset;
for (var key in map_element) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for (var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
}
delete map_element[key];
download_count--;
}
}
setTimeout(initDownloadListen, 200);
};
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null) {
return null;
}
var offsetTop = element.offsetTop;
while (element = element.offsetParent) {
offsetTop += element.offsetTop;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
};
return {
init: init
}
})();注意事项与高级应用
使用方法：将页面上需要延时加载的图片src属性改为lazy_src，然后将上述JS代码放置于body标签的最后面，并调用lazyLoad.init(); 可以使用firebug工具来检查图片是否实现了延时加载。 另外： 如果页面上存在内容切换的栏目，切换时内容里的图片可能不会显示。处理方法是在内容切换时单独进行图片加载处理，例如：
///切换内容的代码…
chlid.find("img[init_src]").each(function(){
$(this).attr("src",$(this).attr("init_src"));
$(this).removeAttr("init_src");
});
所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。
思考一下你是否有这种需求：某篇文章图片很多，如果在载入文章时就载入所有图片，无疑会延缓载入速度，让用户等更久，所以，我想找这样一种插件，让网页只加载浏览器视野范围内的图片，没出现在范围内的图片就暂不加载，等用户滑动滚动条时再逐步加载，lazyload就是用来实现这种效果。 lazyload.js其实是jQuery的一个插件，全称是jquery.lazyload.js，看它的名字就知道它的作用了——就是偷懒载入的意思。由于它是javascript写的，所以适用于所有网页，包括Wordpress。
想要使用lazyload，得先载入jQuery，它是依靠jQuery来实现效果的。
以上就是本文的全部内容，希望大家对js实现网页图片延时加载有了更深入的学习了解。