一、定義
當(dāng)打開(kāi)一個(gè)有很多圖片的頁(yè)面時(shí)，先只加載頁(yè)面上看到的圖片，等滾動(dòng)到頁(yè)面下面時(shí)，再加載所需的圖片。這就是圖片懶加載。
二、作用
減少或延遲請(qǐng)求數(shù)，緩解瀏覽器的壓力，增強(qiáng)用戶(hù)體驗(yàn)。
三、實(shí)現(xiàn)方式
- 設(shè)置圖片src屬性為同一張圖片，同時(shí)自定義一個(gè)data-src屬性來(lái)存儲(chǔ)圖片的真實(shí)地址
- 頁(yè)面初始化顯示的時(shí)候或者瀏覽器發(fā)生滾動(dòng)的時(shí)候判斷圖片是否在視野中
- 當(dāng)圖片在視野中時(shí)，通過(guò)js自動(dòng)改變?cè)搮^(qū)域的圖片的src屬性為真實(shí)地址
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.container{
max-width: 600px;
margin: 0 auto;
}
.container::after{
content: '';
display: block;
clear: both;
}
.container img{
float: left;
width: 50%;
}
h1{
clear: both;
}
/* 因?yàn)閕mg都是浮動(dòng)，如果不清除浮動(dòng)，h1的值高度就相當(dāng)于container里面最高的，不是實(shí)際的數(shù)值 */
</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/9.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/10.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/11.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/12.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/13.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/14.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="19" data-src="http://cdn.jirengu.com/book.jirengu.com/img/19.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="20" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg">
</div>
<script>
start()/* 一開(kāi)始窗口沒(méi)有滾動(dòng)，也需要觸發(fā)一次 */
$(window).on('scroll', function(){
start()
})
function start(){
/*提高性能，不用每張圖片都檢查一遍，加載了的圖片不檢測(cè)*/
$('.container img').not('[data-isLoaded]').each(function(){
var $node = $(this)
if(isShow($node)){
//沒(méi)必要為了為了效果減慢加載速度，懶加載本來(lái)就是為了提高響應(yīng)速度的
//setTimeout(function(){
loadImg($node)
//},500)
}
})
}
function isShow($node){
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
function loadImg($img){
$img.attr('src', $img.attr('data-src'))
$img.attr('data-isLoaded', 1)
}
</script>
</body>
</html>
