JS 圖片懶加載-有解無憂

所謂懶加載就是在圖片進入 *可視區域* 前，用 *同一張* 圖片作為圖片的 src 屬性值，這樣可減少請求及帶寬，懶加載的重點是：判斷元素是否進入可視區域？

元素距離檔案頂部高度(這個值固定不變) - 整個檔案被滾動高度(瀏覽器滾動條向下滾動高度) <= 可視高度，表示元素進入可視區域

Demo：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>懶加載</title>
    <style type="text/css">
        * { padding: 0; margin:0; }
        img { display: block; height: 171px;}
    </style>
</head>
<body>
    <img src="../site/images/users_avatar/user1.png" data-loaded="1">
    <img src="../site/images/users_avatar/user2.png" data-loaded="1">
    <img src="../site/images/users_avatar/user3.png" data-loaded="1">
    <img src="../site/images/users_avatar/user4.png" data-loaded="1">
    <img src="../site/images/users_avatar/user5.png" data-loaded="1">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
</body>
<script type="text/javascript">
    window.onload = function () {
        window.onscroll = function () {
            // 重點：判斷元素是否進入可視區域？
            // 元素距離檔案頂部高度(這個值固定不變)減去
            // 整個檔案被滾動高度(瀏覽器滾動條向下滾動高度)
            // 小于等于可視高度，表示元素進入可視區域
            var images = document.querySelectorAll('img');
            var scroll_h = document.documentElement.scrollTop;
            var visual_h = window.innerHeight;
            // 實作等待加載效果
            setTimeout(function() {
                for (var i = 5; i < images.length; i++) {
                    if (images[i].getAttribute('data-loaded') === '0'
                        && images[i].offsetTop - scroll_h <= visual_h
                        ) {
                            images[i].src = "../site/images/users_avatar/user" + (i + 1) + ".png";
                            images[i].setAttribute('data-loaded', '1');
                    }
                }
            }, 550);
        }
    }
</script>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/109888.html

標籤：JavaScript

上一篇：css，對包含有子元素的元素進行flex后，會影響原有的布局。如何后續處理

下一篇：用JavaScript實作漢字與Unicode的相互轉換