```javascript
<!DOCTYPE html>
<html lang='en'>
<head>
<meat charset='UTF-8'>
<meat name='viewport' content='width=device-width, initial-scale=1.0'>
<style>
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="">
<img id='imgTest0' src="./timg.jpg" alt="">
<img id='imgTest1' src="./timg.jpg" alt="">
<img id='imgTest2' src="./timg.jpg" alt="">
<img id='imgTest3' src="./timg.jpg" alt="">
<img id='imgTest4' src="./timg.jpg" alt="">
<img id='imgTest5' src="./timg.jpg" alt="">
</div>
<script>
// 代理模式----應用於圖片的懶加載和預加載
// let ProxyImage = function (target, src) {
// let pickure = new Image();
// pickure.onload = function () {
// target.src = pickure.src;
// }
// pickure.src = src;
// }
// function imgs() {
// let list = [
// 'http://attach.bbs.miui.com/forum/201105/17/113554rnu40q7nbgnn3lgq.jpg',
// 'http://pic1.win4000.com/wallpaper/b/55597435bb036.jpg',
// 'http://attach.bbs.miui.com/forum/201111/21/205700txzuacubbcy91u99.jpg',
// 'http://d.hiphotos.baidu.com/zhidao/pic/item/6a63f6246b600c334c3e91cb1e4c510fd9f9a16a.jpg',
// 'http://attach.bbs.miui.com/forum/201408/07/194456i55q58pqnb55fi88.jpg',
// 'http://attachments.gfan.com/forum/attachments2/201301/29/125722eh9nj87bq20eq2e8.jpg'
// ]
// for (let i = 0; i < 6; i++) {
// let dom = document.getElementById('imgTest' + i);
// ProxyImage(dom, list[i]);
// }
// }
// imgs();
// 代理模式----應用於圖片的懶加載和預加載
let ProxyImage = (function () {
let pickure;
let arr = [];
return function (target, src, end) {
if (!pickure) {
pickure = new Image();
}
arr.push({
dom: target,
temp: pickure.cloneNode(true),
src: src
});
if (end) {
arr.forEach((item) => {
item.temp.onload = function () {
item.dom.src = item.temp.src
}
item.temp.src = item.src
})
arr = []
}
}
})();
function imgs() {
let list = [
'http://attach.bbs.miui.com/forum/201105/17/113554rnu40q7nbgnn3lgq.jpg',
'http://pic1.win4000.com/wallpaper/b/55597435bb036.jpg',
'http://attach.bbs.miui.com/forum/201111/21/205700txzuacubbcy91u99.jpg',
'http://d.hiphotos.baidu.com/zhidao/pic/item/6a63f6246b600c334c3e91cb1e4c510fd9f9a16a.jpg',
'http://attach.bbs.miui.com/forum/201408/07/194456i55q58pqnb55fi88.jpg',
'http://attachments.gfan.com/forum/attachments2/201301/29/125722eh9nj87bq20eq2e8.jpg'
]
for (let i = 0; i < list.length; i++) {
let dom = document.getElementById('imgTest' + i);
ProxyImage(dom, list[i], i === list.length - 1);
}
}
imgs();
</script>
</body>
</html>