图片懒加载--判断div ul中的li是否已经滑动到可视区域里

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>lazyLoad</title>

<!-- 参考网址  https://segmentfault.com/a/1190000003881643 -->

<style type="text/css" media="all">

 * {

            margin: 0;

            padding: 0;

        }

        #div1 {

            width: 520px;

            margin: 30px auto;

            border: 1px solid red;

            overflow: hidden;

        }

        li {

            width: 160px;

            height: 160px;

            float: left;

            list-style: none;

            margin: 5px;

            background: url(loading.gif) center center no-repeat;

            border: 1px dashed green;

        }

        img{

        width:100%

        }

</style>

</head>

<body>

   <div id="div1">

            <ul>

                <li data-src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg"></li>

                <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg"></li>

                <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg"></li>

                <li data-src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg"></li>

                <li data-src="http://dl.bizhi.sogou.com/images/2014/12/02/986640.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170473_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170475_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170477_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>

            </ul>

        </div>

        <script>

        window.onload = function () {

            window.onscroll();

        };

         window.onscroll = function () {

            var oDiv = document.getElementById('div1');

            var oUl = oDiv.children[0];

            var aLi = oUl.children;

            for (var i = 0, l = aLi.length; i < l; i++) {

                var oLi = aLi[i];

                //检查oLi是否在可视区域

                var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);

                var h = getH(oLi);

                if (h < t) {

                    setTimeout("setImg(" + i + ")", 500);

                }

                console.log(i);

            }

        };

            function setImg(index){

                var oDiv=document.getElementById("div1")

                var oUl=oDiv.children[0];

                var aLi=oUl.children;

                if (aLi[index].dataset) {

                    var src=aLi[index].dataset.src;

                } else{

                    var src=aLi[index].getAttribute('data-src');

                }

                var oImg=document.createElement('img');

                oImg.src=src;

                if (aLi[index].children.length==0) {

                    aLi[index].appendChild(oImg);

                }

            }

            //获得对象距离页面顶端的距离

            function getH(obj) {

                var h = 0;

                while (obj) {

                    h += obj.offsetTop;

                    obj = obj.offsetParent;

                }

                return h;

            }

        </script>

</body>

</html>

这是整个页面的代码。其中有gitH()函数和判断是否在可视区域。

加油。

图片懒加载--判断div ul中的li是否已经滑动到可视区域里的更多相关文章

前端性能优化成神之路--图片懒加载(lazyload image)
图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求什么是懒加载懒 ...
Zepto picLazyLoad Plugin，图片懒加载的Zepto插件
嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...
对于富文本编辑器中使用lazyload图片懒加载
使用lazyload.js图片懒加载的作用是给用户一个好的浏览体验,同时对服务器减轻了压力,当用户浏览到该图片的时候再对图片进行加载,项目中使用lazyload的时候需要将图片加入data-orgin ...
vue项目中实现图片懒加载的方法
对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...
Vue项目中实现图片懒加载
个人网站 https://iiter.cn 程序员导航站开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...
页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
js原生图片懒加载或 js原生图片预加载，html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载当访问一个页面的时候,先把img元素或是其他元素的 ...
基于javascript实现图片懒加载（亲测有效）
这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义图片延迟加载也称为懒加载,延迟加 ...
jQuery实现图片懒加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

sp_helpdb
语法 sp_helpdb [ [ @dbname= ] 'name' ] 参数 [@dbname=] 'name' 是要为其提供信息的数据库名称.name 的数据类型为 sysname,无默认值.如果 ...
leetcode bugfree note
463. Island Perimeterhttps://leetcode.com/problems/island-perimeter/就是逐一遍历所有的cell,用分离的cell总的的边数减去重叠的 ...
matlab中patch函数的用法
http://blog.sina.com.cn/s/blog_707b64550100z1nz.html matlab中patch函数的用法——emily (2011-11-18 17:20:33) ...
Easy Tag Write(3.2)
package skyseraph.android.util; /** * @Title : LogUtil.java * @Package : tcl.nfc.phone.util * @Class ...
怎样设置才能允许外网访问MySQL
1.将本地数据库的user表的第一条记录的host数据改为%,或者用update user set host='%' where user='root'; 2.用MySQL的命令行客户端操作如下步骤: ...
node.js 入门实例【转】
第1章一个简单的博客 nswbmw edited this page 14 days ago · 38 revisions Pages 29 Home FAQ 番外篇之——使用 _id 查询番外篇 ...
iOS开发：http中的get和post请求
什么是 HTTP ? 超文本传输协议(HTTP)的设计目的是保证客户端与服务器之间的通信. HTTP 的工作方式是客户端与服务器之间的请求-应答协议. web 浏览器可能是客户端,而计算机上的网络应用 ...
paper 128：奇异值分解(SVD) --- 线性变换几何意义[转]
PS:一直以来对SVD分解似懂非懂,此文为译文,原文以细致的分析+大量的可视化图形演示了SVD的几何意义.能在有限的篇幅把这个问题讲解的如此清晰,实属不易.原文举了一个简单的图像处理问题,简单形象,真 ...
win10安装oracle 11g 报错要求的结果: 5.0,5.1,5.2,6.0 6.1 之一实际结果: 6.2
Windows10下安装Oracle11G.10G,都会提示如下信息正在检查操作系统要求... 要求的结果: 5.0,5.1,5.2,6.0 之一实际结果: 6.1 检查完成.此次检查的总体结果为 ...
BabelMap 9.0.0.3 汉化版（2016年12月27日更新）
软件简介 BabelMap 是一个免费的字体映射表工具,可辅助使用<汉字速查>程序. 该软件可使用系统上安装的所有字体浏览 Unicode 中的十万个字符,还带有拼音及部首检字法,适合文献 ...

图片懒加载--判断div ul中的li是否已经滑动到可视区域里

图片懒加载--判断div ul中的li是否已经滑动到可视区域里的更多相关文章

随机推荐

热门专题