文档章节

图片迟加载

L
 LorinLuo
发布于 2014/11/21 16:57
字数 822
阅读 27
收藏 0

图片迟加载即当滚动条向下滚动时,只有在视口内的图片才加载,其他图片则不加载。

可以先把图片的url地址,保存在img的一个自定义属性中,然后给图片起个类名lazy,

当滚动条滚动时,把类名为lazy的图片push到一个数组中,然后循环遍历该数组,并判断图片是否在视口内,若在则将该图片的src设为自定义属性的值,并将类名设为nolazy。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        body, ul, li, img{

            margin: 0;

            padding: 0;

        }

        #imgs{

            overflow: hidden;

        }

        #imgs>li{

            float: left;

            list-style-type: none;

            width: 30%;

            margin-left: 5%;

            height: 200px;

            margin-top: 10px;

            background-color: green;

            text-align: center;

            line-height: 200px;

        }

        #imgs li:nth-child(3n+1){

            margin-left: 0;

        }

        #imgs li img{

            width: 100px;

            height: 100px;

            vertical-align: middle;

        }

    </style>

</head>

<body>

<script>

    window.onload = function(){

        var imgArray = document.getElementsByTagName('img');

        var lazyArray = []; //存放未加载的图片

        var viewHeight = window.screen.height;

        var temp = -1; //保存滚动条上次离顶部的距离

        var scrollT = 0; //保存滚动条离顶部的距离

        function setImg(){

            //将未加载的图片push到数组lazyArray

            for(var i=0; i<imgArray.length; i++){

                if(imgArray[i].getAttribute('class') == "lazy"){

                    lazyArray.push(imgArray[i]);

                }

            }

            //判断未加载的图片是否在视窗内

            for(var i=0; i<lazyArray.length; i++){

                //图片离窗口顶部的高度

                var imgT = lazyArray[i].offsetTop;

                //图片在视口内

                if(imgT - scrollT < viewHeight){

                    lazyArray[i].className = 'notlazy';

                    lazyArray[i].setAttribute('src', lazyArray[i].getAttribute('data-src'));

                }

            }

        }

        setImg();

        window.onscroll = function(){

         //兼容性处理

            scrollT = document.body.scrollTop || document.documentElement.scrollTop;

            //判断滚动条的滚动方向 向下才处理

            if(temp < scrollT){

                setImg();

            }

            temp = scrollT;

        }

    }

</script>

<ul id="imgs">

    <li><img data-src="img/503.png" src="img/503.png" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

    <li><img data-src="img/503.png" src="" alt=""/></li>

</ul>

</body>

</html>



© 著作权归作者所有

下一篇: 加载器 seaJS
L
粉丝 18
博文 166
码字总数 116776
作品 0
成都
程序员
私信 提问
【转】ImagesLazyLoad 图片延迟加载效果

之前在做一个图片浏览效果时,要看后面的小图必须等到前面的加载完,而且大图的位置是在大量的小图后面,导致大图要等到小图都加载完才能显示,为了 解决这个问题,就想到了Lazyload效果。 ...

红薯
2010/03/05
563
0
Twitter安全新特征——对Direct message点对点加密的Secret Conversation诞生

     Twitter最近采用了一项新的技术,那就是对私信(Direct message)进行点对点加密。从2013年起就有人推测Twitter要采用这项技术,虽然5年过去了,Twitter才开始测试对消息进行点对点...

嘶吼RoarTalk
2018/05/10
0
0
2011年的两首歌

去年(再过一个小时,就是前年)的12月14日,迈克尔·杰克逊的遗作专辑发行了。 其中一首歌叫做《握我的手》(Hold my hand),我非常喜欢。后面的整个一月份,反反复复,都在听它。 歌中唱到...

阮一峰
2012/01/01
0
0
hibernate中存在的session关闭问题解决方案

org.hibernate.LazyInitializationException: could not initialize proxy - no Session 病症:这是一个lazy使用后的Exception,使用迟时加载,在session(hibernate里的session),关闭后使......

JSTL
2013/06/13
0
1
org.hibernate.LazyInitializationException: could not initialize proxy - no

错误页面提示 could not initialize proxy - no Session 控制台 org.hibernate.LazyInitializationException: could not initialize proxy - no Session 病症:这是一个lazy使用后的Excepti......

arison_919
01/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部