懒加载——网页图片的加载技术
2016-04-29 14:54
274 查看
目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片,从而节约了网络带宽和提高了初次加载的速度,具体实现的技术并不复杂,下面分别对其说明。
首先,在页面中准备一个id为div1的div,在这个div中放一个ul,ul中准备了一些li,然而这些li都有一个data-src的属性,准备着图片的地址,具体结构如下:
图片的动态加载就是通过读取li元素,然后获得li元素的data-src属性的值赋予动态创建的图片的src,从而实现了图片的创建。
那么怎么识别是否在可视区域呢?这里需要一个函数,能够实现获得当前元素距离网页顶部的距离!
当网页的滚动条滚动时要时时判断当前li的位置!
当页面加载完成以后要主动运行一下window.onscroll,从而获得当前可视范围内的图片
另外,像这样的页面,障眼法和美化都是必须的,比如给每个li一个loading的图片作为背景,从而实现了当前图片正在加载的效果,美化工作就是做好合理的布局。
首先,在页面中准备一个id为div1的div,在这个div中放一个ul,ul中准备了一些li,然而这些li都有一个data-src的属性,准备着图片的地址,具体结构如下:
<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>
图片的动态加载就是通过读取li元素,然后获得li元素的data-src属性的值赋予动态创建的图片的src,从而实现了图片的创建。
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; }
当网页的滚动条滚动时要时时判断当前li的位置!
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); } } };
当页面加载完成以后要主动运行一下window.onscroll,从而获得当前可视范围内的图片
window.onload = function () { window.onscroll(); };
另外,像这样的页面,障眼法和美化都是必须的,比如给每个li一个loading的图片作为背景,从而实现了当前图片正在加载的效果,美化工作就是做好合理的布局。
* { 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% }
相关文章推荐
- EXT根据数据绘制chart柱状图和饼图,动态改变坐标轴
- hbase配置(基于HA)
- MFC之HTTP post请求
- java一些练习-贪吃蛇MVC源码分享
- Android App中使用Gallery制作幻灯片播放效果
- 零起点学通C语言选择什么样的书和方法
- pl/sql 无法定位程序输入点 于动态链接库 ...于oraociei12.dll 问题的解决办法
- 【前端自动化】Gulp的使用(一):安装gulp
- 【Raspberry Pi 3试用体验】+ngrok 内网穿透
- nodejs开发指南读后感
- Android中基于RxJava的响应式编程
- 就全选,不全选问题,attr与prop的区别
- sql语句in和exists的效率
- 【题解】HDU.3350.#define is unsafe
- SQL Server游标的使用
- mybatis批量插入数据
- ArchLinux上安装librdkafka
- 使用Unity3D 5.3.4 模仿2D游戏 FlappyBird(一)
- jsp:include html文件乱码的解决办法
- ArcEngine实现坐标转换和投影