圖片延遲加載方法

時間 2019-11-08

標籤圖片延遲加載方法简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="con" id="con">
        <img src="http://e.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcbc648862ebc096b63f624a884.jpg" alt="">
        <img src="http://f.hiphotos.baidu.com/image/pic/item/10dfa9ec8a1363277fd6fcbb928fa0ec08fac77a.jpg" alt="">
        <img src="http://h.hiphotos.baidu.com/image/pic/item/3b87e950352ac65c27e1741cf9f2b21192138afc.jpg" alt="">
        <img src="http://e.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcbc648862ebc096b63f624a884.jpg" alt="">
        <img src="http://f.hiphotos.baidu.com/image/pic/item/10dfa9ec8a1363277fd6fcbb928fa0ec08fac77a.jpg" alt="">
        <img src="http://h.hiphotos.baidu.com/image/pic/item/3b87e950352ac65c27e1741cf9f2b21192138afc.jpg" alt="">
        <img src="http://e.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcbc648862ebc096b63f624a884.jpg" alt="">
        <img src="http://f.hiphotos.baidu.com/image/pic/item/10dfa9ec8a1363277fd6fcbb928fa0ec08fac77a.jpg" alt="">
        <img src="http://h.hiphotos.baidu.com/image/pic/item/3b87e950352ac65c27e1741cf9f2b21192138afc.jpg" alt="">
        <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/7aec54e736d12f2ee12eb30f4dc2d562853568b1.jpg">
        <img src="addicon.png" alt="" lazy-src="http://f.hiphotos.baidu.com/image/pic/item/b7003af33a87e95000f3e10312385343faf2b4fc.jpg">
        <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938c246679dd7628535e5dd6fb1.jpg">
        <img src="addicon.png" alt="" lazy-src="http://e.hiphotos.baidu.com/image/pic/item/b8389b504fc2d562d923cd82e51190ef76c66cb1.jpg">
        <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/b2de9c82d158ccbf5c23f7321bd8bc3eb135411e.jpg">
        <img src="addicon.png" alt="" lazy-src="http://h.hiphotos.baidu.com/image/pic/item/fcfaaf51f3deb48f5b6f2cb8f31f3a292df57856.jpg">
        <img src="addicon.png" alt="" lazy-src="http://h.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c816f31a18ebf3eb13533fa4056.jpg">
        <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/8ad4b31c8701a18bdece9f299d2f07082838feab.jpg">
        <img src="addicon.png" alt="" lazy-src="http://e.hiphotos.baidu.com/image/pic/item/f31fbe096b63f624e75bb4658444ebf81a4ca356.jpg">
        <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/838ba61ea8d3fd1fb92c2f5c334e251f95ca5fab.jpg">
        <img src="addicon.png" alt="" lazy-src="http://g.hiphotos.baidu.com/image/pic/item/b3fb43166d224f4a5ebcfe750af790529822d1ab.jpg">
        <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/14ce36d3d539b6009aeb82d1ea50352ac65cb7ab.jpg">
        <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/43a7d933c895d1439cb3664570f082025baf078a.jpg">
        <img src="addicon.png" alt="" lazy-src="http://c.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef1cfc2a40fefaaf51f2de66fa.jpg">
        <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/8694a4c27d1ed21b16c8a383ae6eddc451da3f56.jpg">
        <img src="addicon.png" alt="" lazy-src="http://h.hiphotos.baidu.com/image/pic/item/8435e5dde71190efb9fd1fb9cd1b9d16fdfa6056.jpg">
        <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/a8ec8a13632762d0863829d9a3ec08fa513dc656.jpg">
        <img src="addicon.png" alt="" lazy-src="http://e.hiphotos.baidu.com/image/pic/item/2934349b033b5bb5550da29835d3d539b700bcfa.jpg">
        <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/e1fe9925bc315c60d493e6898eb1cb1349547756.jpg">
        <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/b812c8fcc3cec3fdedfb2513d588d43f8694278a.jpg">
        <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/6a600c338744ebf8031d61cadbf9d72a6159a7d2.jpg">
        <img src="addicon.png" alt="" lazy-src="http://g.hiphotos.baidu.com/image/pic/item/64380cd7912397dddf5f47ed5a82b2b7d0a28731.jpg">
        <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/b21bb051f81986189713b26e49ed2e738ad4e680.jpg">
        <img src="addicon.png" alt="" lazy-src="http://h.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c20cac95184d6277f9f2ff862.jpg">
        <img src="addicon.png" alt="" lazy-src="http://h.hiphotos.baidu.com/image/pic/item/bf096b63f6246b605b85699de8f81a4c500fa254.jpg">
        <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/023b5bb5c9ea15ce5f6339e0b5003af33b87b24e.jpg">
        <img src="addicon.png" alt="" lazy-src="http://d.hiphotos.baidu.com/image/pic/item/5bafa40f4bfbfbedf03d96b77bf0f736aec31f95.jpg">
    </div>
</body>
<style type="text/css">
    .con{width: 1260px;margin: 0 auto;}
    img{float: left;width: 400px;height: 400px;margin: 10px;}
</style>
</html>

View Code

js代碼：css

 1 //延遲加載圖片
 2     var imageloadCurrentWindower = function(container) {
 3         //在空閒時循環加載剩餘圖片工做的定時器
 4         var autoLoaderTimer = null;
 5         //在空閒時啓動加載剩餘圖片工做的定時器
 6         var restartAutoLoaderTimer = null;
 7         //圖片容器
 8         this.container = container || $(document); //容器默認爲整個文檔
 9         //全部圖片
10         this.allImages;
11         //初始化延遲加載的圖片的信息
12         this.scanLazyImageInfo = function() {
13             allImages = {};
14             this.container.find('img[lazy-src]').each(function() {
15                 var el = $(this);
16                 var offset = el.offset();
17                 if (!allImages[offset.top]) {
18                     allImages[offset.top] = [];
19                 }
20                 allImages[offset.top].push(el);
21             });
22         }
23         //加載當前屏幕中被延遲加載的圖片
24         this.loadCurrentWindow = function() {
25             var h1, h2;
26             h1 = this.container.height();
27             h2 = $(window).height();
28             var height = this.container.scrollTop() + (h1 > h2 ? h2 : h1);
29             for (var k in allImages) {
30                 if (parseInt(k) < height) {
31                     loadImages(allImages, k);
32                     continue;
33                 }
34                 break;
35             }
36         }
37         //頁面空閒時自動加載未加載的圖片
38         this.autoLoad = function() {
39             // 取一行圖片加載
40             for (var k in allImages) {
41                 loadImages(allImages, k);
42                 break;
43             }
44             //取消上一個定時器
45             if (autoLoaderTimer) {
46                 clearTimeout(autoLoaderTimer);
47             }
48             //從新生成定時器，1秒後若是頁面仍然空閒則加載下一行圖片
49             autoLoaderTimer = setTimeout(autoLoad, 1000);
50         }
51         //加載圖片
52         loadImages = function(allImages, _key) {
53             var _imgs = allImages[_key];
54             for (var i = 0, len = _imgs.length; i < len; i++) {
55                 var tmpImg = _imgs[i];
56                 tmpImg.attr('src', tmpImg.attr('lazy-src'));
57                 tmpImg.removeAttr('lazy-src');
58             }
59             delete allImages[_key];
60         }
61         //掃描全部被延遲加載的圖片信息
62         this.scanLazyImageInfo();
63         //加載當前窗口中的圖片
64         this.loadCurrentWindow();
65         //監視當前容器的滾動條滾動事件
66         this.container.scroll(function() {
67             loadCurrentWindow();
68         });
69         //監視窗口的尺寸改變事件
70         $(window).resize(function() {
71             scanLazyImageInfo();
72             loadCurrentWindow();
73         });
74         //監視頁面是否空閒,以鼠標是否移動爲標誌
75         $(document).mousemove(function() {
76             //清除空閒時自動加載圖片的定時器
77             clearTimeout(autoLoaderTimer);
78             //若是存在清除重啓空閒時自動加載圖片的定時器
79             if (restartAutoLoaderTimer) clearTimeout(restartAutoLoaderTimer);
80             //從新生成重啓空閒時自動加載圖片的定時器
81             restartAutoLoaderTimer = setTimeout(function() {
82                 autoLoad();
83             }, 5000);
84         });
85         //啓動自動加載當前屏幕外圖片
86         this.autoLoad();
87     }

View Code

調用：html

$(function(){
        //啓動延遲加載,支持$(document)
        imageloadCurrentWindower($("#con"));
    });

有jquery依賴jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。