-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (89 loc) · 3.75 KB
/
index.html
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
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<img src="http://f.hiphotos.baidu.com/image/pic/item/503d269759ee3d6db032f61b48166d224e4ade6e.jpg" alt="">
<div id="container" onscroll="watchScroll()">
<div class="p-img">
<img class="lazy-load" data-src="http://f.hiphotos.baidu.com/image/pic/item/503d269759ee3d6db032f61b48166d224e4ade6e.jpg"
/>
</div>
<div class="p-img">
<img class="lazy-load" data-src="http://a.hiphotos.baidu.com/image/pic/item/500fd9f9d72a6059f550a1832334349b023bbae3.jpg"
/>
</div>
<div class="p-img">
<img class="lazy-load" data-src="http://a.hiphotos.baidu.com/image/pic/item/d6ca7bcb0a46f21f46612acbfd246b600d33aed5.jpg"
/>
</div>
<div class="p-img">
<img class="lazy-load" data-src="http://d.hiphotos.baidu.com/image/pic/item/a044ad345982b2b713b5ad7d3aadcbef76099b65.jpg"
/>
</div>
<div class="p-img">
<img class="lazy-load" data-src="http://e.hiphotos.baidu.com/image/pic/item/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg"
/>
</div>
</div>
<button id="button" onclick="addImage()">增加图片</button>
<script src="./vendor/hz-lazyload/hz-lazyload.js"></script>
<script>
// document.getElementsByClassName('container')[0].ontouchstart = function() {
// return false;
// }
// document.body.ontouchmove = function(e) {
// e.preventDefault();
// return false;
// }
// document.body.onmousemove = function(e) {
// e.preventDefault();
// return false;
// }
// document.body.onmousewheel = function(e) {
// console.log(e);
// e.preventDefault();
// }
let srcList = ['http://c.hiphotos.baidu.com/zhidao/pic/item/d50735fae6cd7b8964afe8f10c2442a7d8330e85.jpg',
'http://img5.niutuku.com/phone/1212/3752/3752-niutuku.com-22310.jpg',
'http://cdn.duitang.com/uploads/item/201504/19/20150419H0823_WSGAM.jpeg',
'http://img0.imgtn.bdimg.com/it/u=1363910025,3482458907&fm=214&gp=0.jpg',
'http://i2.hdslb.com/bfs/archive/95e5351273b72b587d929c7593fb6ffd66cb220a.jpg'
]
let button = document.getElementById('button');
// document.getElementsByClassName('container')[0].onscroll = function() {
// console.log('用户自定义的scroll事件');
// }
// 创建lazyload实例
let lazyload = new HzLazyLoad({
className: 'lazy-load',
container: 'container',
distance: '100',
placeholder: './images/loading.gif'
});
lazyload.render();
function addImage() {
document.getElementById('button').style.display = 'none';
for (let i = 0; i < srcList.length; i++) {
let div = document.createElement('div');
div.className = 'p-img';
let img = document.createElement('img');
img.className = 'lazy-load';
img.setAttribute('data-src', srcList[i]);
div.appendChild(img);
// document.getElementsByClassName('container')[0].insertBefore(div, button);
document.getElementById('container').appendChild(div);
}
lazyload.render();
}
function watchScroll() {
// console.log('用户自定义的scroll事件');
}
</script>
</body>
</html>