因為
網(wǎng)頁加載太慢,想著減少頁面卡頓,就開始想讓用戶看到哪加載到哪,直接上代碼了:
```
<!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>Document</title>
<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<style>
.container {
max-width: 800px;
margin: 0 auto;
}
.container:after {
content: "";
display: block;
clear: both;
}
.container img {
width: 50%;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
<img src="img/jiazai1.jpg" alt="1" data-src="img/timg.jpg">
</div>
<script>
// 一開始沒有滾動的時候，出現(xiàn)在視窗中的圖片也會加載
start();
// 當(dāng)頁面開始滾動的時候，遍歷圖片，如果圖片出現(xiàn)在視窗中，就加載圖片
var clock; //函數(shù)節(jié)流
$(window).on('scroll', function() {
if (clock) {
clearTimeout(clock);
}
clock = setTimeout(function() {
start()
}, 200)
})
function start() {
$('.container img').not('[data-isLoading]').each(function() {
if (isShow($(this))) {
loadImg($(this));
}
})
}
// 判斷圖片是否出現(xiàn)在視窗的函數(shù)
function isShow($node) {
return $node.offset().top <= $(window).height() + $(window).scrollTop();
}
// 加載圖片的函數(shù)，就是把自定義屬性data-src 存儲的真正的圖片地址，賦值給src
function loadImg($img) {
$img.attr('src', $img.attr('data-src'));
// 已經(jīng)加載的圖片，我給它設(shè)置一個屬性，值為1，作為標(biāo)識
// 弄這個的初衷是因為，每次滾動的時候，所有的圖片都會遍歷一遍，這樣有點浪費，所以做個標(biāo)識，滾動的時候只遍歷哪些還沒有加載的圖片
$img.attr('data-isLoading', 1);
}
</script>
</body>
</html>
```
