圖片懶加載

時間 2019-11-10
標籤圖片加載简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>圖片懶加載實現</title>
    <script src="jquery-1.10.2.min.js"></script>
    <style type="text/css">
        *{list-style: none;margin: 0;padding: 0;}
        .container{width: 240px;margin: 0 auto;}
        .container li img{
            width: 240px;
            height: 180px;
        }
    </style>
</head>
<body>
<ul class="container">
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>

</ul>
</body>
<script>
    (function(){
        var head=document.head;
        var width=document.documentElement.clientWidth;
        var styleN=document.createElement('style');
        styleN.innerHTML='html{font-size:'+width/16+'px !important;}';
        head.appendChild(styleN);
    })();
</script>
<script>
// 先進行一次檢查
    lazyLoad()
$(window).on('scroll',function () {//當頁面滾動的時候綁定事件
    lazyLoad();
})

function lazyLoad() {
    $('.container img').each(function () {//遍歷全部的img標籤
        if (checkShow($(this)) && !isLoaded($(this)) ){
            // 須要寫一個checkShow函數來判斷當前img是否已經出如今了視野中
            //還須要寫一個isLoaded函數判斷當前img是否已經被加載過了
            loadImg($(this));//符合上述條件以後，再寫一個加載函數加載當前img
        }
    })
}
function checkShow($img) { // 傳入一個img的jq對象
    var scrollTop = $(window).scrollTop();  //即頁面向上滾動的距離
    var windowHeight = $(window).height(); // 瀏覽器自身的高度
    var offsetTop = $img.offset().top;  //目標標籤img相對於document頂部的位置

    if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2個臨界狀態之間的就爲出如今視野中的
        return true;
    }
        return false;
}
function isLoaded ($img) {
    return $img.attr('data-src') === $img.attr('src'); //若是data-src和src相等那麼就是已經加載過了
}
function loadImg ($img) {
    $img.attr('src',$img.attr('data-src')); // 加載就是把自定義屬性中存放的真實的src地址賦給src屬性
}
</script>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。