js相关：javascript实现图片延迟加载方法汇总(三种方法)
发布于 2020-11-23|
看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，跟着小妖一起学习javascript实现图片延迟加载吧
看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。原理是这样：页面可见区域以下的图片先不加载，等到用户向下滚动到图片位置时，再进行加载。这样做的好处在哪里？——当页面有好几屏内容时，有可能用户只看前几屏的内容，这样我们就可以只加载用户需要看的图片，减少服务器向用户浏览器发送图片文件所产生的负荷，下面通过三种方法给大家介绍js实现图片延时加载。js实现图片延迟加载方法一：
```javascript
lazyImage2.html
-->
```
js实现网页图片延时加载方法二：再没贴代码之前先给大家讲下js实现图片延时加载的原理。实现原理：把所有需要延时加载的图片改成如下的格式：
```javascript
```
然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）：JS代码：
```javascript
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 key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for (var l = 0; l 使用方法：把页面上需要延时加载的图片src改成为lazy_src，然后把上面的js放到body最后面，然后调用：lazyLoad.init();
调戏的方法可以使用firebug来查看一时图片是否是延时加载。另外：
如果你的页面上存在有内容切换的栏目的话，可能在切换时切换的内容里的图片可能会不显示，处理的方法是在内容时单独图片加载处理，如：
```javascript
///切换内容的代码…
chlid.find("img[init_src]").each(function(){
$(this).attr("src",$(this).attr("init_src"));
$(this).removeAttr("init_src");
});
```
原生态js实现图片延时加载方法三：
```javascript
通过原生js延迟加载图片
div{width:100px;height:100px;background:#F00;margin-bottom:30px}
//以上图片测试时可用复制多点
(function(){
//common
function tagName(tagName){
return document.getElementsByTagName(tagName);
}
function $(id){
return document.getElementById(id);
}
function addEvent(obj,type,func){
if(obj.addEventListener){
obj.addEventListener(type,func,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,func);
}
}
//这里可以按照需要配置些参数
var v={
eleGroup:null,
eleTop:null,
eleHeight:null,
screenHeight:null,
visibleHeight:null,
scrollHeight:null,
scrolloverHeight:null,
limitHeight:null
}
//对数据进行初始化
function init(element){
v.eleGroup=tagName(element)
screenHeight=document.documentElement.clientHeight;
scrolloverHeight=document.body.scrollTop;
for(var i=0,j=v.eleGroup.length;i
```
