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

随机推荐

winserver2008 DNS 很详细
from http://www.it165.net/admin/html/201312/2182.html DNS(Domain Name System域名系统)区域化管理分布式层次性域名空间结 ...
WebForm——IIS服务器、开发方式和简单基础
一.B/S和C/S 1.C/S C/S 架构是一种典型的两层架构,其全程是Client/Server,即客户端服务器端架构,其客户端包含一个或多个在用户的电脑上运行的程序,而服务器端有两种,一种是数据 ...
SQL用先进先出存储过程求出库数量
create table t( id ,), name ),--商品名称 j int, --入库数量 c int, --出库数量 jdate datetime --入库时间 ) ,,'2007-12- ...
解决Android与服务器交互大容量数据问题
对于目前的状况来说,移动终端的网络状况没有PC网络状况那么理想.在一个Android应用中,如果需要接收来自服务器的大容量数据,那么就不得不考虑客户的流量问题.本文根据笔者的一个项目实战经验出发,解决 ...
Overview of the Oppia codebase（Oppia代码库总览）
Oppia is built with Google App Engine. Its backend is written in Python, and its frontend is written ...
[liusy.api-SMJ]-SMJ 介绍学习阶段（二）
我选择的是 Spring + Mybatis + Jesery 无状态架构方案. JAVA 比较常用的架构 SSH spring struts2 hibernate流行一阶段后, SSM spr ...
jquery 获取父窗口的元素父窗口子窗口
一.获取页面元素取父窗口的元素方法:$(selector, window.parent.document); 那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent ...
window10 安装SVN 提示权限问题
http://www.yishimei.cn/network/551.html 经常在网上看到有同学反映,他们在控制面板里卸载软件的时候,总是会出现2502.2503错误代码的问题,并且这个问题大多 ...
分享一个延迟加载图片的JS
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
跳转 linQ
<a href="../Book/BookDetail?book_id=@book.book_id">@book.book_name</a> query + ...

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

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

随机推荐

热门专题