思享工具箱

javascript实现图片延迟加载方法汇总(三种方法)

摘要：
——当页面有好几屏内容时，有可能用户只看前几屏的内容，这样我们就可以只加载用户需要看的图片，减少服务器向用户浏览器发送图片文件所产生的负荷，下面通过三种方法给大家介绍js实现图片延时加载。js实现图片延迟加载方法一：?for{varimgTop=lazyImgArr[k].offsetTop;//1305if{lazyImgArr[k].src=lazyImgArr[k].alt;lazyImgArr[k].className="notlazy"}}temp=scrollHeight;}};//--˃js实现网页图片延时加载方法二：再没贴代码之前先给大家讲下js实现图片延时加载的原理。
看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，跟着小编一起学习javascript实现图片延迟加载吧

看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。原理是这样：页面可见区域以下的图片先不加载，等到用户向下滚动到图片位置时，再进行加载。这样做的好处在哪里？——当页面有好几屏内容时，有可能用户只看前几屏的内容，这样我们就可以只加载用户需要看的图片，减少服务器向用户浏览器发送图片文件所产生的负荷，下面通过三种方法给大家介绍js实现图片延时加载。

js实现图片延迟加载方法一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>lazyImage2.html</title>
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
<meta http-equiv="description"content="this is my page">
<meta http-equiv="content-type"content="text/html; charset=UTF-8">
<!--<link rel="stylesheet"type="text/css"href="./styles.css"mce_href="styles.css">-->
</head>
<body style="text-align:center"mce_style="text-align:center">
<p> </p><p></p><p></p><p></p><p></p>
<div style="height:1290px;800px;border:1px;background:gray;"></div>
<div style="height:150px;800px;border:1px;background:green;"></div>
<img class="lazy"src="images/sprite.gif"mce_src="images/sprite.gif"alt="images/lazyloadImg.jpg"/>
<script type="text/javascript"><!--
vartemp = -1;//用来判断是否是向下滚动（向上滚动就不需要判断延迟加载图片了）
window.onscroll = function() {
varimgElements = document.getElementsByTagName("img");
varlazyImgArr = newArray();
varj = 0;
for(vari=0; i<imgElements.length; i++) {
if(imgElements[i].className == "lazy"){
lazyImgArr[j++] = imgElements[i];
}
}
varscrollHeight = document.body.scrollTop;//滚动的高度
varbodyHeight = document.body.offsetHeight;//body（页面）可见区域的总高度
if(temp < scrollHeight) {//为true表示是向下滚动，否则是向上滚动，不需要执行动作。
for(vark=0; k<lazyImgArr.length; k++) {
varimgTop = lazyImgArr[k].offsetTop;//1305（图片纵坐标）
if((imgTop - scrollHeight) <= bodyHeight) {
lazyImgArr[k].src = lazyImgArr[k].alt;
lazyImgArr[k].className = "notlazy"
}
}
temp = scrollHeight;
}
};
// --></script>
</body>
</html>

js实现网页图片延时加载方法二：

再没贴代码之前先给大家讲下js实现图片延时加载的原理。

实现原理：

把所有需要延时加载的图片改成如下的格式：

1
<img lazy_src="图片路径"border="0"/>

然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）：

JS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
lazyLoad = (function() {
varmap_element = {};
varelement_obj = [];
vardownload_count = 0;
varlast_offset = -1;
vardoc_body;
vardoc_element;
varlazy_load_tag;
functioninitVar(tags) {
doc_body = document.body;
doc_element = document.compatMode == 'BackCompat'? doc_body : document.documentElement;
lazy_load_tag = tags || ["img", "iframe"];
};
functioninitElementMap() {
varall_element = [];
//从所有相关元素中找出需要延时加载的元素
for(vari = 0,
len = lazy_load_tag.length; i < len; i++) {
varel = document.getElementsByTagName(lazy_load_tag[i]);
for(varj = 0,
len2 = el.length; j < len2; j++) {
if(typeof(el[j]) == "object"&& el[j].getAttribute("lazy_src")) {
element_obj.push(all_element[key]);
}
}
}
for(vari = 0,
len = element_obj.length; i < len; i++) {
varo_img = element_obj[i];
vart_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
if(map_element[t_index]) {
map_element[t_index].push(i);
} else{
//按距上距离保存一个队列
vart_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++; //需要延时加载的图片数量
}
}
};
functioninitDownloadListen() {
if(!download_count) return;
varoffset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;
//可视化区域的offtset=document的高+
varvisio_offset = offset + doc_element.clientHeight;
if(last_offset == visio_offset) {
setTimeout(initDownloadListen, 200);
return;
}
last_offset = visio_offset;
varvisio_height = doc_element.clientHeight;
varimg_show_height = visio_height + offset;
for(varkey inmap_element) {
if(img_show_height > key) {
vart_o = map_element[key];
varimg_vl = t_o.length;
for(varl = 0; l < img_vl; l++) {
element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
}
deletemap_element[key];
download_count--;
}
}
setTimeout(initDownloadListen, 200);
};
functiongetAbsoluteTop(element) {
if(arguments.length != 1 || element == null) {
returnnull;
}
varoffsetTop = element.offsetTop;
while(element = element.offsetParent) {
offsetTop += element.offsetTop;
}
returnoffsetTop;
}
functioninit(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
};
return{
init: init
}
})();

使用方法：把页面上需要延时加载的图片src改成为lazy_src，然后把上面的js放到body最后面，然后调用：lazyLoad.init();
调戏的方法可以使用firebug来查看一时图片是否是延时加载。

另外：

如果你的页面上存在有内容切换的栏目的话，可能在切换时切换的内容里的图片可能会不显示，处理的方法是在内容时单独图片加载处理，如：

1
2
3
4
5
///切换内容的代码…
chlid.find("img[init_src]").each(function(){
$(this).attr("src",$(this).attr("init_src"));
$(this).removeAttr("init_src");
});

原生态js实现图片延时加载方法三：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>通过原生js延迟加载图片</title>
<style type="text/css">
div{100px;height:100px;background:#F00;margin-bottom:30px}
</style>
</head>
<body>
"src="a.gif"/></div>
"src="a.gif"/></div>
"src="a.gif"/></div>
"src="a.gif"/></div>
</body>
//以上图片测试时可用复制多点
<script type="text/javascript">
(function(){
//common
functiontagName(tagName){
returndocument.getElementsByTagName(tagName);
}
function$(id){
returndocument.getElementById(id);
}
functionaddEvent(obj,type,func){
if(obj.addEventListener){
obj.addEventListener(type,func,false);
}elseif(obj.attachEvent){
obj.attachEvent('on'+type,func);
}
}
//这里可以按照需要配置些参数
varv={
eleGroup:null,
eleTop:null,
eleHeight:null,
screenHeight:null,
visibleHeight:null,
scrollHeight:null,
scrolloverHeight:null,
limitHeight:null
}
//对数据进行初始化
functioninit(element){
v.eleGroup=tagName(element)
screenHeight=document.documentElement.clientHeight;
scrolloverHeight=document.body.scrollTop;
for(vari=0,j=v.eleGroup.length;i<j;i++){
if(v.eleGroup[i].offsetTop<=screenHeight && v.eleGroup[i].getAttribute('data-url')){
v.eleGroup[i].setAttribute('src',v.eleGroup[i].getAttribute('data-url'));
v.eleGroup[i].removeAttribute('data-url')
}
}
}
functionlazyLoad(){
if(document.body.scrollTop == 0){
limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight;
}else{
limitHeight=document.body.scrollTop+document.documentElement.clientHeight;
}
for(vari=0,j=v.eleGroup.length;i<j;i++){
if(v.eleGroup[i].offsetTop<=limitHeight && v.eleGroup[i].getAttribute('data-url')){
v.eleGroup[i].src=v.eleGroup[i].getAttribute('data-url');
v.eleGroup[i].removeAttribute('data-url')
}
}
}
init('img')
addEvent(window,'scroll',lazyLoad);
})()
</script>
</html>

标签：#延迟加载#方法汇总#var#src#var方法#element | 浏览：174 | 发布日期：

免责声明：文章转载自《javascript实现图片延迟加载方法汇总(三种方法)》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇filebeat 选项【VBA编程】15.WorkSheet对象常用属性下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

前端知识控制input按钮的显示与隐藏

1 if(fm.ReadFlag.value=="readonly"){ 2 var arr = document.getElementsByTagName("input") 3 for (var int =0; int < arr.length ; int ++){ 4 arr[int]....

点击图片，出现大图

//图片，重点class引用pimg <img class="pimg" alt="" src="http://t.zoukankan.com/picth/image/....." /></a> //点击图片的调用 <script type="text/javascript"> $(function()...

DOM-Element类型

Element类型 Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。Element节点具有以下特征： nodeType的值为1nodeName的值为元素的标签名nodeValue的值为nullparentNode的值为Document或Element其子节点可能是Element、Text、CDATASection、E...

Nodejs与ES6系列1:变量声明

1、声明变量 在JS当中一个变量的作用域（scope）是程序中定义这个变量的区域。变量分为两类,全局（global）的和局部的。其中全局变量的作用域是全局性的，即在JavaScript代码中，它处处都有定义。而在函数之内声明的变量，就只在函数体内部有定义。它们是局部变量，作用域是局部性的。函数的参数也是局部变量，它们只在函数体内部有定义。 1.1 var变...

##Jquery基础（三）

Jquery基础-DOM ##一、DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。 浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组...

Echart 动态生成series数据

要做成页面只传入数据，js生成图表，如下图 下面是js代码 var LineChart = function (ID, title, axisData,seriesData) { var myChart = echarts.init(document.getElementById(ID)); var newData = [];...

最新文章

随机推荐

思享工具箱导航