博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js图片延迟加载
阅读量:5841 次
发布时间:2019-06-18

本文共 3101 字,大约阅读时间需要 10 分钟。

 

 

lazyload可以用于很多场合,如JS、css的按需加载;对于页面上很多大图片的网站来说,图片的延迟加载,可以很好的节约页面大小,减少页面与服务器的资源交互,减少用户的等待时间等。所以使用的人越来越多了。

刚不久前做一个业务时,碰到了此类需求。不同的是,这个网站上没有引入jQuery,所以不能拿别人开发的来开发了。遂只好自己来写代码了,此文贴出代码,仅作参考交流。代码基本上实现了图片lazyload的需求,不过还有一些问题,如果你对代码有改进建议和意见,欢迎留言告知,先谢!

可以,再看代码。

var addListener=function(e, n, o, u){
if(e.addEventListener) {
e.addEventListener(n, o, u);
return true;
} else if(e.attachEvent) {
e['e' + n + o] = o;
e[n + o] = function() {
e['e' + n + o](window.event);
};
e.attachEvent('on' + n, e[n + o]);
return true;
}
return false;
},
getObjPoint=function(o){
var x=y=0;
do {
x += o.offsetLeft || 0;
y += o.offsetTop  || 0;
o = o.offsetParent;
} while (o);
return {
'x':x,'y':y};
},
IE=function(){
if(/msie (\d+\.\d)/i.test(navigator.userAgent)){
return document.documentMode || parseFloat(RegExp.$1);
}
return 0;
}
//上面是一些功能函数的封装,下面是lazyload部分
var lazyload=function(img){
if(img.complete||img.readyState&&(
img.readyState=='loaded'||img.readyState=='complete')
){
//图片已经下载或者缓存就不用继续了
return false;
}
img.setAttribute('_src',img.src);
img.src='images/nothing.gif';
//如果不想显示占位loading图片,也可以移除src:img.removeAttribute('src');
//貌似移除src在webkit核心浏览器(safari & chrome)下并不会阻止浏览器下载图片,所以最好还是使用占位图片方式
//但是请不要将src设置为空,img.src=""; 貌似某些浏览器下还会下载其他东西(IE?)
var action=function(img){
//响应操作
if(img.getAttribute('loaded')){
//判断是否loaded了
clearInterval(img.timer);
return;
}
var doc=document.documentElement,
body=document.body,
sy=(doc&&doc.scrollTop || body&&body.scrollTop || 0) - (doc&&doc.clientTop || body&&body.clientTop || 0),
np=getObjPoint(img),
ny=np.y,
wy=doc&&doc.clientHeight || body&&body.clientHeight;
//console.log(ny+'|'+sy+'|'+wy)
if(Math.abs(ny-sy)
//通过计算比较图片与当前浏览器窗口的位置判断图片是否已进入当前可视区域
img.setAttribute('loaded','loaded');//设置loaded属性,标记此img已经开始加载
img.src=img.getAttribute('_src');//修正src
img.οnlοad=img.οnerrοr=img.onreadystatechange=function(){
//IE通过onreadystatechange,其他onload
if(img&&img.readyState&&img.readyState!='loaded'&&img.readyState!='complete'){
return false;
}
img.onload = img.onreadystatechange = img.onerror = null;
var animat=function(el){
//一个简单的fadeIn效果
var s=0,
timer=setInterval(function(){
el.style.opacity=s;
el.style.filter=('opacity='+(s*100));
s+=0.05;
if(s>1)clearInterval(timer);
},30)
}
animat(img);
};
}
}
action(img);
if(IE()&&IE()<9){
//ie8及以下浏览器通过scroll事件绑定貌似有问题,暂时先用定时器实现
img.timer=setInterval(function(){action(img)},1000);
}else{
addListener(window,'scroll',function(){action(img)},false);
}
}

调用代码,可以遍历需要lazyload的图片,然后循环调用lazyload(img)即可,具体可下载demo查看。

实现原理是遍历图片,判断图片是否已经加载(readyStatte)或者存在缓存(complete),如果还未加载,那么就将图片的src设置成占位图片,然后绑定事件。如果检测到图片已经进入可视区域,那么就将src再设置过来。

有一些疑问:

第一,IE下的绑定scroll事件,貌似不能多绑定,只能绑定一个,类似于使用window.onscroll了,原因不明。还未深究,暂时用setInterval替代。

第二,浏览器对图片的下载加载方式。如果图片正在下载,然后将其src设置为另外一个,那么之前的图片是会立即被abort吗?所有浏览器都是这样的?如果将src设置为空(img.src=”),那么之前的图片会被abort停止加载吗?所有浏览器都这样?移除src(removeAttibute(‘src’))呢?

如果有人有相关资料,欢迎提供。

2011.04.12 16:20 更新: 实践证明,我上面疑问的答案是 否,也就是无论你移除src或者重设src,都不能阻止浏览器(chrome、ff>4?)下载之前的图片。所以JS版的lazyload是无意义的。只有前后端配合(页面输出前就将img的src设置为占位图),才能真正lazyload。

所以大家不要再使用那个神马jquery lazyload了,毫无意义。本文代码也毫无意义。唯一的亮点,大概就是图片加载时的fadeIn效果有一些迷人吧。。。哈哈

转载地址:http://pavcx.baihongyu.com/

你可能感兴趣的文章
【SAP HANA】关于SAP HANA中带层次结构的计算视图Cacultation View创建、激活状况下在系统中生成对象的研究...
查看>>
【ros】Create a ROS package:package dependencies报错
查看>>
通过容器编排和服务网格来改进Java微服务的可测性
查看>>
Java I/O操作
查看>>
灰度图像和彩色图像
查看>>
argparse - 命令行选项与参数解析(转)
查看>>
修改上一篇文章的node.js代码,支持默认页及支持中文
查看>>
java只能的round,ceil,floor方法的使用
查看>>
将txt文件转化为json进行操作
查看>>
我的2014-相对奢侈的生活
查看>>
Java设计模式
查看>>
华为OJ 名字美丽度
查看>>
mysql-This version of MySQL doesn’t yet support ‘LIMIT & IN/ALL/ANY/SOME 错误解决
查看>>
基本概念复习
查看>>
红黑树
查看>>
【数据库】
查看>>
WindowManager.LayoutParams 详解
查看>>
安卓中数据库的搭建与使用
查看>>
.NET 设计规范--.NET约定、惯用法与模式-2.框架设计基础
查看>>
sql 内联,左联,右联,全联
查看>>