Skip to content

Commit 188bb6d

Browse files
ZWkangZWkang
committed
稍微打包封装一下
1 parent b8ce394 commit 188bb6d

File tree

1 file changed

+141
-0
lines changed

1 file changed

+141
-0
lines changed

‎懒加载(over)/index_package.html

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>index</title>
6+
<script>
7+
window.onload=function(){
8+
if(!Array.prototype.remove){
9+
Array.prototype.remove = function(val) {
10+
if(Object.prototype.toString.call(this)!=='[object Array]')return;
11+
for(var i = this.length-1;i>=0;i--){
12+
if(val === this[i]){
13+
this.splice(i,1);
14+
}
15+
}
16+
i=null;
17+
return this;
18+
};
19+
}
20+
var lazyload = (function (){
21+
var doc = document,
22+
win = window
23+
_cache = [];
24+
this.init = function(){
25+
Array.prototype.forEach.call(document.getElementsByTagName('img'),function(value){
26+
if((value.dataset&&value.dataset.src!=='')||value.getAttribute('data-src')!==''){
27+
_cache.push(value);
28+
}
29+
//需要转换的img标签对象压入数组
30+
});
31+
return this;
32+
};
33+
function changesrc(){
34+
this.dataset.src?this.src=this.dataset.src:this.setAttribute('src',this.getAttribute('data-src'));
35+
this.dataset.src?this.dataset.src='':this.setAttribute('data-src','');
36+
}
37+
function getPositionLeft(ele){
38+
var actLeft = ele.offsetLeft;
39+
var currentLeft = ele.offsetParent;
40+
while(currentLeft!==null){
41+
actLeft+=currentLeft.offsetLeft;
42+
currentLeft = currentLeft.offsetParent;
43+
}
44+
return actLeft;
45+
}
46+
function getPositionTop(ele){
47+
var actTop = ele.offsetTop;
48+
var currentTop = ele.offsetParent;
49+
while(currentTop!==null){
50+
actTop +=currentTop.offsetTop;
51+
currentTop = currentTop.offsetParent;
52+
}
53+
return actTop;
54+
}
55+
function getReleativeTop(ele){
56+
var scrollT = win.pageYoffset || doc.documentElement.scrollTop||doc.body.scrollTop;
57+
return getPositionTop(ele)-scrollT;//绝对距离减去滑动条距离
58+
}
59+
function getReleativeLeft(ele){
60+
var scrollL = win.pageXoffset || doc.documentElement.scrollLeft||doc.body.scrollLeft;
61+
return getPositionLeft(ele)-scrollL;//绝对距离减去滑动条距离
62+
}
63+
function cuca(){
64+
if(_cache.length<=0){return;}
65+
var value,lookH,lookW,scrollT,Left,Top;
66+
lookH = win.innerHeight||doc.documentElement.clientHeight||doc.body.clientHeight;
67+
lookW = win.innerWidth||doc.documentElement.clientWidth||doc.body.clientWidth;
68+
//滚动条距离
69+
scrollT = win.pageYoffset ||doc.documentElement.scrollTop||doc.body.scrollTop;
70+
71+
for(var i = 0;i<_cache.length;i++){
72+
value = _cache[i];
73+
Left = getReleativeLeft(value);
74+
Top = getReleativeTop(value);
75+
76+
if(Left>0&&Top>0&&Left<lookW&&Top<lookH){
77+
changesrc.call(value);
78+
// console.log(this);
79+
_cache.remove(value);
80+
}
81+
}
82+
i=null;
83+
}
84+
return {
85+
_cache:_cache,
86+
_init:init,
87+
_cuca:cuca
88+
}
89+
})()
90+
window.lazyload = lazyload._init();
91+
window.onresize=window.onscroll=function(){
92+
lazyload._cuca();
93+
}
94+
}
95+
96+
97+
</script>
98+
<style>
99+
body{
100+
width: 3000px;
101+
}
102+
img{
103+
width:300px;
104+
height: 200px;
105+
margin-top: 100px;
106+
margin-left: 100px;
107+
}
108+
</style>
109+
</head>
110+
<body>
111+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_1.png" alt="">
112+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_2.png" alt="">
113+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_3.png" alt="">
114+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_4.png" alt="">
115+
<div>
116+
<div>
117+
<div>
118+
<div>
119+
<div id="main"></div>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_5.png" alt="">
125+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_6.png" alt="">
126+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_7.png" alt="">
127+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_8.png" alt="">
128+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_9.png" alt="">
129+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_10.png" alt="">
130+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_11.png" alt="">
131+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_12.png" alt="">
132+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_13.png" alt="">
133+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_14.png" alt="">
134+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_15.png" alt="">
135+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_16.png" alt="">
136+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_17.png" alt="">
137+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_19.png" alt="">
138+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_20.png" alt="">
139+
<img data-src="https://ls-l.cn/wp-content/uploads/2016/11/this_21.png" alt="">
140+
</body>
141+
</html>

0 commit comments

Comments
 (0)