zoukankan      html  css  js  c++  java

  • 图片延迟加载方法

    <!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代码：

     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

    调用：

    $(function(){
        //启动延迟加载,支持$(document)
        imageloadCurrentWindower($("#con"));
    });

    有jquery依赖
  • 相关阅读:
    Google的Protobuf安装及使用笔记一
    std::list与std::map的排序比较
    svn库镜像
    daemontools中supervise系统进程监控
    memcached的客户端
    Memcached安装及使用
    eclipse下maven配置
    栈溢出
    堆排序
    redis使用笔记
  • 原文地址：https://www.cnblogs.com/yuexin/p/4717939.html
Copyright © 2011-2022 走看看