目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时,均采用一种称为懒加载的方式。具体表现为:当页面被请求时,只加载可视区域的图片,其他部分图片则不加载,只有这些图片出现在可视区域的时候,才会动态进行加载这些图片,从而节约了带宽、提高了初次加载的速度。具体实现方式如下:
首先,在页面准备一个div为div1的div,在这个div中放一个ul,lu中准备一些li,这些li都有一个data-src属性,准备着图片的地址,具体结构如下:
<div id="div1"> <ul> <li data-src="http://t03.pic.sogou.com/7620cd6e740c3c50.jpg"></li> <li data-src="http://t03.pic.sogou.com/2c67d8e270eb61c3.jpg"></li> <li data-src="http://t01.pic.sogou.com/9c9d058c0c731087.jpg"></li> <li data-src="http://t02.pic.sogou.com/007da8d5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/64d939a5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/95eb5da5456bc0ab.jpg"></li> <li data-src="http://t04.pic.sogou.com/5c3fa2b5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/f6443925456bc0ab.jpg"></li> <li data-src="http://t04.pic.sogou.com/f96780b5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/54a75d2e740c3c50.jpg"></li> <li data-src="http://t03.pic.sogou.com/3b173ee50fdad689.jpg"></li> <li data-src="http://t03.pic.sogou.com/95eb5da5456bc0ab.jpg"></li> <li data-src="http://t04.pic.sogou.com/5c3fa2b5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/f6443925456bc0ab.jpg"></li> <li data-src="http://t04.pic.sogou.com/f96780b5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/54a75d2e740c3c50.jpg"></li> <li data-src="http://t03.pic.sogou.com/3b173ee50fdad689.jpg"></li> <li data-src="http://t01.pic.sogou.com/b0e3d909c131e9cb.jpg"></li> <li data-src="http://t02.pic.sogou.com/27e362d461029a95.jpg"></li> <li data-src="http://t02.pic.sogou.com/ddfb62d6f09be522_i.jpg"></li> <li data-src="http://t01.pic.sogou.com/9448c50e46a53e65.jpg"></li> <li data-src="http://t03.pic.sogou.com/b7e5a7e50fdad689.jpg"></li> <li data-src="http://t03.pic.sogou.com/3825466e4e3b9ce4.jpg"></li> <li data-src="http://t03.pic.sogou.com/1d7d602e740c3c50.jpg"></li> <li data-src="http://t02.pic.sogou.com/085ea3d5456bc0ab.jpg"></li> <li data-src="http://t04.pic.sogou.com/ad61be7270eb61c3.jpg"></li> <li data-src="http://t04.pic.sogou.com/ed7705b270eb61c3.jpg"></li> <li data-src="http://t04.pic.sogou.com/491c4cb461029a95.jpg"></li> <li data-src="http://t03.pic.sogou.com/e603c6ae4e3b9ce4.jpg"></li> <li data-src="http://t01.pic.sogou.com/6b6a148cdc19fbb4.jpg"></li> <li data-src="http://t01.pic.sogou.com/c301bac9f514c378.jpg"></li> <li data-src="http://t01.pic.sogou.com/11a6ce8e4e3b9ce4.jpg"></li> <li data-src="http://t04.pic.sogou.com/41b26435456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/adb811acdc19fbb4.jpg"></li> <li data-src="http://t03.pic.sogou.com/fbb08be9c131e9cb.jpg"></li> <li data-src="http://t01.pic.sogou.com/b2ecd2ce4e3b9ce4.jpg"></li> <li data-src="http://t04.pic.sogou.com/0509bff02200e0a5.jpg"></li> <li data-src="http://t04.pic.sogou.com/0509bff02200e0a5.jpg"></li> <li data-src="http://t04.pic.sogou.com/e655c4fe49cac8ea.jpg"></li> <li data-src="http://t01.pic.sogou.com/5251ca4e740c3c50.jpg"></li> <li data-src="http://t03.pic.sogou.com/7fe86f66ce211acb.jpg"></li> <li data-src="http://t04.pic.sogou.com/541569b5df134ca6.jpg"></li> <li data-src="http://t01.pic.sogou.com/d34a3f0e46a53e65.jpg"></li> <li data-src="http://t02.pic.sogou.com/78bca85270eb61c3.jpg"></li> </ul> </div>
图片的动态加载就是通过读取li元素,然后获得li元素的data-src属性的值赋予动态创建的图片的src,从而实现图片的创建。
function setImg(index){ var oDiv = document.getElementByTd("div1"); var oUl = oDiv.children[0] ; var oLis = oUl.children ; //html5新特性 if(oLis[index].dataset){ var src = oLis[index].dataset.src ; }else{ var src = oLis[index].getAttribute("data-src"); } var oImg = document.createElement("img"); oImg.src = src ; if(oLis[index].children.length == 0){ oLis[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.getElementByTd("div1"); var oUl = oDiv.children[0] ; var oLis = oUl.children ; for(var i=0;i<oLis.length;i++){ var oLi = oLis[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; }
至此,一款目前网络盛行的懒加载图片技术即已完成。另外图片源也可以通过ajax的方式进行获得,这里只是提供一种思路,可以自由发挥。。。
时间: 2024-10-19 02:34:42