圖片懶加載
在圖片未到達(dá)可視區(qū)域時(shí)，先不請(qǐng)求圖片，到達(dá)可視區(qū)域后再去請(qǐng)求圖片，防止頁面在初始化時(shí)加載大量的圖片，影響頁面的響應(yīng)時(shí)間
實(shí)現(xiàn)方法：
- 先給img的src指定一個(gè)默認(rèn)的圖片地址(圖片src不能為空，因?yàn)闉榭盏脑捯矔?huì)去請(qǐng)求）
- 給img添加一個(gè)自定義屬性data-src，將圖片真實(shí)的地址賦值給data-src；
- 給window添加一個(gè)onscroll事件，當(dāng)滾動(dòng)頁面時(shí)，判斷img標(biāo)簽是否在可視范圍內(nèi)，如果在，則將data-src中的地址賦值給src，便于去請(qǐng)求圖片資源；
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
var n = 0; //存儲(chǔ)圖片加載到的位置，避免每次都從第一張圖片開始遍歷
lazyload(); //頁面載入完畢加載可是區(qū)域內(nèi)的圖片
window.onscroll = lazyload;
function lazyload() { //監(jiān)聽頁面滾動(dòng)事件
var seeHeight = document.documentElement.clientHeight; //可見區(qū)域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動(dòng)條距離頂部高度
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
為了防止在滾動(dòng)到img的可視范圍時(shí)，在一定時(shí)間內(nèi)多次請(qǐng)求圖片，需要添加節(jié)流函數(shù)，如下：
// 簡(jiǎn)單的節(jié)流函數(shù)
//fun 要執(zhí)行的函數(shù)
//delay 延遲
//time 在time時(shí)間內(nèi)必須執(zhí)行一次
function throttle(fun, delay, time) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果達(dá)到了規(guī)定的觸發(fā)時(shí)間間隔，觸發(fā) handler
if (curTime - startTime >= time) {
fun.apply(context, args);
startTime = curTime;
// 沒達(dá)到觸發(fā)間隔，重新設(shè)定定時(shí)器
} else {
timeout = setTimeout(fun, delay);
}
};
};
// 實(shí)際想綁定在 scroll 事件上的 handler
function lazyload(event) {
for (var i = n; i < imgNum; i++) {
if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if (img.eq(i).attr("src") == "default.jpg") {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i + 1;
}
}
}
}
// 采用了節(jié)流函數(shù)
window.addEventListener('scroll',throttle(lazyload,500,1000));
圖片預(yù)加載
原理：將所有所需的圖片提前加載到本地，在需要時(shí)，直接從本地緩存中取圖片；
實(shí)現(xiàn)方式：new Image()，然后使用onload()事件回調(diào)預(yù)加載完成函數(shù)；當(dāng)瀏覽器將圖片下載到本地后，之后同樣的src就直接使用緩存
1.無序加載
// 所有的圖片（要是網(wǎng)絡(luò)太好，自己加圖片吧）
const imgs = [
"http://op2clp53n.bkt.clouddn.com/20161104122758_cap-hpi.jpg",
"http://op2clp53n.bkt.clouddn.com/500414621%20%281%29.jpg",
"http://op2clp53n.bkt.clouddn.com/cover_bg.png",
"http://img.aotu.io/mamboer/post-aotu.jpg",
"http://misc.aotu.io/o2/img/books/books-cover.jpg",
"http://img.aotu.io/Yettyzyt/cover.png",
"http://img.aotu.io/wengeek/responsive-image.png",
"https://gw.alicdn.com/tfs/TB1_6wnRXXXXXbwXFXXXXXXXXXX-900-500.jpg",
"http://op2clp53n.bkt.clouddn.com/_138.jpg",
"http://op2clp53n.bkt.clouddn.com/0_ocs_fin_cov_1.jpg",
"http://op2clp53n.bkt.clouddn.com/2voyage.jpg",
"http://op2clp53n.bkt.clouddn.com/boa_illustrations_master_fb_1200x628-12.jpg",
"http://op2clp53n.bkt.clouddn.com/building_science_bulletin_cover_2__1x.jpg",
"http://op2clp53n.bkt.clouddn.com/building-science-bulletin-cover_1x.jpg",
"http://op2clp53n.bkt.clouddn.com/chemistry4_1x.png",
"http://op2clp53n.bkt.clouddn.com/first_colony_dribbble_copy.jpg"
];
let len = imgs.length;
/**
* 遍歷imgs數(shù)組，將所有圖片加載出來
* 可以通過控制臺(tái)查看網(wǎng)絡(luò)請(qǐng)求，會(huì)發(fā)現(xiàn)所有圖片均已加載
*/
for (let i = 0; i < len; i++) {
let imgObj = new Image(); // 創(chuàng)建圖片對(duì)象
imgObj.src = imgs[i];
imgObj.addEventListener('load', function () { // 這里沒有考慮error，實(shí)際上要考慮
console.log('imgs' + i + '加載完畢');
}, false);
}
2. 有序加載
// 所有的圖片（要是網(wǎng)絡(luò)太好，自己加圖片吧）
const imgs = [
"http://op2clp53n.bkt.clouddn.com/20161104122758_cap-hpi.jpg",
"http://op2clp53n.bkt.clouddn.com/500414621%20%281%29.jpg",
"http://op2clp53n.bkt.clouddn.com/cover_bg.png",
"http://img.aotu.io/mamboer/post-aotu.jpg",
"http://misc.aotu.io/o2/img/books/books-cover.jpg",
"http://img.aotu.io/Yettyzyt/cover.png",
"http://img.aotu.io/wengeek/responsive-image.png",
"https://gw.alicdn.com/tfs/TB1_6wnRXXXXXbwXFXXXXXXXXXX-900-500.jpg",
"http://op2clp53n.bkt.clouddn.com/_138.jpg",
"http://op2clp53n.bkt.clouddn.com/0_ocs_fin_cov_1.jpg",
"http://op2clp53n.bkt.clouddn.com/2voyage.jpg",
"http://op2clp53n.bkt.clouddn.com/boa_illustrations_master_fb_1200x628-12.jpg",
"http://op2clp53n.bkt.clouddn.com/building_science_bulletin_cover_2__1x.jpg",
"http://op2clp53n.bkt.clouddn.com/building-science-bulletin-cover_1x.jpg",
"http://op2clp53n.bkt.clouddn.com/chemistry4_1x.png",
"http://op2clp53n.bkt.clouddn.com/first_colony_dribbble_copy.jpg"
];
let len = imgs.length;
/**
* 遍歷imgs數(shù)組，有序?qū)⑺袌D片加載出來
* 可以通過控制臺(tái)查看網(wǎng)絡(luò)請(qǐng)求，會(huì)發(fā)現(xiàn)所有圖片均按順序加載
*/
let count = 0;
load();
function load() {
var imgObj = new Image();
imgObj.src = imgs[count];
$(imgObj).on('load error', function () { // 沒錯(cuò)我使用了jQuery
console.log(count);
if (count >= len) {
console.log('加載完畢');
$('.container').addClass('active');
} else {
load(); // 繼續(xù)加載下一張
}
count++;
});
}
