<!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是否已经滑动到可视区域里的更多相关文章

  1. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  2. Zepto picLazyLoad Plugin，图片懒加载的Zepto插件

    嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...

  3. 对于富文本编辑器中使用lazyload图片懒加载

    使用lazyload.js图片懒加载的作用是给用户一个好的浏览体验,同时对服务器减轻了压力,当用户浏览到该图片的时候再对图片进行加载,项目中使用lazyload的时候需要将图片加入data-orgin ...

  4. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  5. Vue项目中实现图片懒加载

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...

  6. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  7. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  8. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  9. jQuery实现图片懒加载

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Thinkphp3.2----------------Thinkphp3.2的目录结构介绍

    ThinkPHP框架目录结构\index.php         入口文件\Application     应用目录\Public         资源文件目录\ThinkPHP         框架 ...

  2. windows---------------windows如何查看哪个应用占用了哪个端口的方法

    假如我们需要确定谁占用了我们的80端口在windows命令行窗口下执行:netstat -aon|findstr "80"TCP 127.0.0.1:80 0.0.0.0:0 LI ...

  3. 三分之一的程序猿之社交类app踩过的那些坑

    三分之一的程序猿之社交类app踩过的那些坑 万众创新,全民创业.哪怕去年陌生人社交不管融资与否都倒闭了不知道多少家,但是依然有很多陌生人社交应用层出不穷的冒出来.各种脑洞大开,让人拍案叫起. 下面我们 ...

  4. FluentData-新型轻量级ORM 利用T4模板 批量生成多文件 实体和业务逻辑 代码

    FluentData,它是一个轻量级框架,关注性能和易用性. 下载地址:FlunenData.Model 利用T4模板,[MultipleOutputHelper.ttinclude]批量生成多文件 ...

  5. python学习笔记系列----（三）数据结构

    这一章主要是介绍了python一些常用的数据结构,比如list,tuple,dictionary,set,以及一些实用遍历技巧,主要讲的还是list. 3.1 list 主要介绍了list的一些常用的 ...

  6. mysql 性能优化方案1

    网 上有不少mysql 性能优化方案,不过,mysql的优化同sql server相比,更为麻烦与复杂,同样的设置,在不同的环境下 ,由于内存,访问量,读写频率,数据差异等等情况,可能会出现不同的结果 ...

  7. java中log4j用法详细讲解和一些小总结

    0.Log4j的用法详解 首先,在项目中的classes 中新建立一个log4j.properties文件即可: 在实际编程时,要使Log4j真正在系统中运行事先还要对配置文件进行定义.定义步骤就是对 ...

  8. .NET分布式事务处理

    在进行数据持久化的时候,我们会经常用到事务处理.一般情况下,ADO.NET中的事务处理就能够满足我们的需要,但是,ADO.NET中的事 务不能同事对多个数据库连接进行原子性的操作:如果在你的业务环境中 ...

  9. dd-wrt 定时重连 pppoe 更换ip地址

    因为做代理,IP时常被封的原因,所以,需要每天定时重启路由器,重启路由器影响太大,所以重新拨号是一个更好的选择. 在dd-wrt里面,杀掉pppoe服务进程就可以了,这个进程会自动重新启动,然后就相当 ...

  10. python之haproxy配置文件操作（第三天）

    作业: 对haproxy配置文件进行操作 要求: 对haproxy配置文件中backend下的server实现增删改查的功能 一.这个程序有二个版本 1. python2.7版本见haproxy_py ...