懶加載或者按需加載凹炸，是一種很好的優(yōu)化網(wǎng)頁或應(yīng)用的方式汞斧。這種方式實(shí)際上是先把你的代碼在一些邏輯斷點(diǎn)處分離開熊咽，然后在一些代碼塊中完成某些操作后漓糙，立即引用或即將引用另外一些新的代碼塊。這樣加快了應(yīng)用的初始加載速度谚咬，減輕了它的總體體積鹦付，因?yàn)槟承┐a塊可能永遠(yuǎn)不會(huì)被加載。
我們之前看到的懶加載一般是這樣的形式：
- . 瀏覽一個(gè)網(wǎng)頁择卦，準(zhǔn)備往下拖動(dòng)滾動(dòng)條
- . 拖動(dòng)一個(gè)占位圖片到視窗
- . 占位圖片被瞬間替換成最終的圖片
我們可以在示例中看到懶加載是如何使用的敲长，網(wǎng)頁首先用一張輕量級(jí)的圖片占位，當(dāng)占位圖片被拖動(dòng)到視窗互捌，瞬間加載目標(biāo)圖片潘明，然后替換占位圖片。
下圖所示 ：
黑色的 是占位圖片
當(dāng)用戶滾動(dòng)時(shí) 將隱藏的圖片顯示出來（已經(jīng)進(jìn)行了優(yōu)化 當(dāng)用戶打開網(wǎng)頁時(shí) 會(huì)顯示一部分圖片）先調(diào)用一次 start () 增強(qiáng)用戶體驗(yàn)
image.png
當(dāng)一個(gè)元素出現(xiàn)在我們眼前 小于 窗口高度 加上窗口滾動(dòng)的高度的時(shí)候 就意味著 到達(dá)目標(biāo)點(diǎn) 可以開始加載圖片 或者其他內(nèi)容
對(duì)返回結(jié)果進(jìn)行判斷 結(jié)果為true時(shí) 開始執(zhí)行加載任務(wù) start ()
function isShow($node){
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
完整代碼如下：
<!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">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<title>圖片懶加載</title>
</head>
<style>
.container{
max-width: 800px;
margin: 0 auto;
}
.container::after {
content: '';
display: block;
clear: both;
}
.container img{
float: left;
width: 50%;
}
/* 目標(biāo)元素 */
h1 {
clear: both;
}
</style>
<body>
<div class="container">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="2"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="3"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="4"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="5"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="6"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="7"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="8"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="9"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="10"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="11"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="12"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="13"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="14"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
<!-- <h1 id="target">hello</h1> -->
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18"
data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
</div>
<script>
//滾動(dòng)事件
start () //打開頁面 調(diào)用一次
$(window).on('scroll',function(){
start () //滾動(dòng)頁面是 調(diào)用一次 方便管理
})
//加載函數(shù)
function start (){
$('.container img').not('[data-isLoaded]').each(function(){
var $node = $(this)
if( isShow( $node) ){
//緩沖效果
setTimeout(function(){
loadIng( $node)
},500)
}
})
}
// 頁面邏輯
function isShow($node){
// 當(dāng)一個(gè)元素出現(xiàn)在我們眼前 小于 窗口高度 加上窗口滾動(dòng)的高度的時(shí)候 就意味著 到達(dá)目標(biāo)點(diǎn)
// 可以開始加載圖片 或者其他內(nèi)容
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
// 顯示狀態(tài)
function loadIng($img){
// 獲取目標(biāo)元素 并替換
$img.attr('src', $img.attr('data-src'))
//性能優(yōu)化 進(jìn)行判斷 已經(jīng)加載的 不會(huì)再進(jìn)行加載
$img.attr('data-isLoaded', 1)
}
</script>
</body>
</html>
該示例 用jQuery 實(shí)現(xiàn) 秕噪，對(duì)代碼進(jìn)行最大優(yōu)化
//性能優(yōu)化 進(jìn)行判斷 已經(jīng)加載的 不會(huì)再進(jìn)行重復(fù)加載
$img.attr('data-isLoaded', 1)
