图片懒加载--判断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 ...

随机推荐

gedit 没有preference项，使preference回归，并用命令行设置行号，text wrapping等
1.最简单的,使preference选项回来: gsettings set org.gnome.settings-daemon.plugins.xsettings overrides '@a{sv} ...
Eclipse开发快捷键技巧
1.alt+?或alt+/:自动补全代码或者提示代码这个是我最得意的快捷键组合了,尤其是当输入syso几个字符之后,2个手指轻松按下这2个键的时候,自动就补全System.out.println() ...
拼接LINQ动态表达式
using System; using System.Linq; using System.Linq.Expressions; public static class LinqBuilder { // ...
BaseAdapter日常的封装
我们日常开发中BaseAdapter使用非常的多,大家有没有想过,再进一步封装,将平常使用的对象集合,利用泛型放入集合中,再也不用每次都重写那几个方法了,当然我也提供我的下载地址(https://gi ...
UIAlertController警告视图和操作表单
//创建一个myAlert1操作表单对象(UIAlertControllerStyleActionSheet为操作表单,UIAlertControllerStyleAlert为警告视图) UIAler ...
php读取excel内容
使用php读取到excel文件中的内容 1.下载PHPExcel类 2.代码: header("Content-type:text/html;charset=utf-8");req ...
此操作失败的原因是对 IID 为“{000208DA-0000-0000-C000-000000000046}”的接口的 COM 组件调用 QueryInterface
有些电脑报错,有些电脑正常. 环境:VS2010 WinForm程序, Office2007 C#操作Excel时报错.错误: 无法将类型为“System.__ComObject”的 COM 对象强制 ...
Objective-C基础4
1.强指针:默认的情况下所有的指针都是强指针,关键字__strong 弱指针:__week关键字修饰的指针 2.ARC:编译器将自动在代码合适的地方插入retain.release.autorelea ...
Material Design Lite，简洁惊艳的前端工具箱之交互组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应 ...
Android 常用操作
0.android studios使用介绍使用介绍 android studio 常用小技巧网址 1.怎么样添加第三方库方法一: 第一步:将第三方库以module的形式导入第二步:选中要导入第 ...

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

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

随机推荐

热门专题