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

随机推荐

tftp 限制ip 限制ip段或者多个ip段访问
1 限制单个ip访问 tftp 配置tftp信息 vi /etc/xinetd.d/tftp 在 service tftp配置信息中添加 only_form =ip 重启 service xinet ...
a biped was detected but cannot be configured properly (Bipe导入Unity 无法正确识别)
OP stated "I export the biped with 'animation' and 'bake animation' ticked and the correct fram ...
MySQL的下载与安装和 navicat for mysql 安装使用
新手上路-MySQL安装目录结构 Windows平台 MySQL安装示例数据导入 Linux平台 CentOS系统 Ubuntu系统 FAQ 密码生成工具-keepass 修改提示符图形工具删 ...
"_OBJC_CLASS_$_AddFriendPageItem", referenced from:
该出错是指:有些头文件没有导入到 TARGETS 中的Build Phases - Compile Sources 中
Tomcat 常用配置及网站部署
一.同一Tomcat 多个端口部署不同的项目在tomcat 安装目录下C:/Program Files/apache-tomcat-6.0.29/conf找到server.xml (1 ...
paper 118：计算机视觉、模式识别、机器学习常用牛人主页链接
牛人主页(主页有很多论文代码) Serge Belongie at UC San Diego Antonio Torralba at MIT Alexei Ffros at CMU Ce Liu at ...
final发布视频
final版本发布的视频已上传至秒拍,视频地址: http://m.miaopai.com/show/channel/AHqv~VA7lrk144ONLWrveQ__ 以下是功能截图: ...
Centos Samba 服务器 iptables 和 SElinux 设置
1.安装samba服务器 # yum install samba 2.配置 # vi /etc/samba/smb.conf security = user (100行左右) 在Share Defin ...
url编码
url编码情况1:网址路径中包含汉字打开IE,输入网址”http://zh.wikipedia.org/wiki/春节”.注意,”春节”这两个字此时是网址路径的一部分. 查看HTTP请求的头信息, ...
angularJS——模块
一.在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规技术(HTML,CSS,J ...

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

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

随机推荐

热门专题