JS 圖片懶載入_ZenDei技術網路在線

JS 圖片懶載入

-Advertisement-

所謂懶載入就是在圖片進入 *可視區域* 前，用 *同一張* 圖片作為圖片的 src 屬性值，這樣可減少請求及帶寬。懶載入的重點是：判斷元素是否進入可視區域？元素距離文檔頂部高度(這個值固定不變) - 整個文檔被滾動高度(瀏覽器滾動條向下滾動高度) <= 可視高度，表示元素進入可視區域Demo： <! ...

所謂懶載入就是在圖片進入 *可視區域* 前，用 *同一張* 圖片作為圖片的 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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

MySQL字元串函數：substring_index()的使用詳解

MySQL字元串截取函數substring_index()的使用 ...
MySQL命令(SQL語句)

1.mysql登陸完整登陸命令: mysql -u root -p xxxxx -h 127.0.0.1 -P 23306 語法:mysql -u 用戶名 -p 密碼 -h mysql伺服器的IP地址 -P 使用的埠號非完整登陸命令: mysql -u root -p 回車(回車後再輸入密碼) ...
andorid jar/庫源碼解析之Butterknife

目錄：andorid jar/庫源碼解析 Butterknife：作用：用於初始化界面控制項，控制項方法，通過註釋進行綁定控制項和控制項方法慄子： public class MainActivity extends AppCompatActivity { @BindView(R.id.btnTest1 ...
Soul Android app 懸浮view以及帖子中view的聯動刷新逆向分析

Soul app是我司的競品，對它的語音音樂播放同步聯動的邏輯很感興趣，於是就開啟了一波逆向分析。下麵看代碼，以及技術分析，直接步入正軌，哈哈。我們根據https://github.com/xingstarx/ActivityTracker 這個工具，找到某一個頁面，比如cn.soulapp.a ...
AFNetworking源碼解析與面試考點思考

最近重讀了AFNetworking 3.x的源碼，算是溫故而知新吧。也梳理了一些優秀的代碼細節和麵試考點，羅列下來，發現這個庫小而精緻，簡直初學者的寶藏庫。開源庫怎麼看？先說個題外話，閱讀優質的開源代碼庫，絕對是程式員們快速提升自我的有效途徑，而怎樣高效率的去閱讀源碼同樣也是一個問題，不知道有沒 ...
andorid jar/庫源碼解析之Dagger/Dagger2

目錄：andorid jar/庫源碼解析 Dagger、Dagger2：作用： 1、用於解耦Activity和業務邏輯 2、在使用業務的時候，不需要重覆編寫new代碼。 3、當業務變化的時候，不需要對所有的UI，進行修改。 4、便於測試，和正式，替換指定Module即可。慄子：需要： 1、定義 ...
iOS啟動優化（一）性能檢測

項目啟動優化是每個APP都可以接入的技術，只不過針對不同的業務邏輯我們需要有不一樣的解決方案，因為有大部分人的“優化”，是在處理自己放蕩不羈的代碼。既然這裡我們要討論啟動優化，那麼我們從啟動檢測開始。啟動檢測一般我們會以main函數作為分割點，main之前和main之後。 main之前稱為per- ...
andorid jar/庫源碼解析之EventBus

目錄：andorid jar/庫源碼解析 EventBus：作用：用於不同Activity，Service等之間傳遞消息（數據）。慄子： A頁面：onCreate定義 EventBus.getDefault().register(this); onDestroy定義 EventBus.getD ...