图片懒加载
jqery图片懒加载
1 <!DOCTYPE html> 2 <html> 3 <header> 4 <meta http-equiv="Content-type" content="text/html;charset=utf-8"> 5 <title>jquery ajax</title> 6 <style type="text/css"> 7 .loading{ 8 background:url(https://img.alicdn.com/tps/i1/TB1Q4fJFVXXXXXiXFXXJgUmHVXX-184-38.gif) no-repeat scroll 50% 50%; 9 } 10 </style> 11 <script src="jquery.min.js"></script> 12 <script type="text/javascript"> 13 $(document).ready(function(){ 14 lazyload_cc("loading",400);//body超出窗口400px之后再启用 15 16 }); 17 function lazyload_cc(className,beginHeight){ 18 //功能：当div完整出现在屏幕时，加载。 19 //参数className，需要进行懒加载的元素的类名，要取一样的名字 20 //参数beginHeight，滚动条滚到哪里，开始监听 21 //必须有inited熟悉你给，request-url属性，loading的图片自己准备。可以卸载.loading中。 22 if(!className) { 23 console.error("lazyload_cc方法中缺少className参数"); 24 return; 25 } 26 if(!beginHeight) beginHeight=0; 27 lazyDivList=$("."+className); 28 $(window).scroll(function(){ 29 srcTop=$(window).scrollTop(); 30 if(srcTop>=beginHeight){ 31 lazyDivList.trigger("lazyme",$(window).scrollTop()); 32 } 33 }); 34 lazyDivList.bind("lazyme",function(e,scrTop){ 35 var offset=$(this).offset().top; 36 var interval=$(window).height()-$(this).height();//当前页面可视高度 37 var sumB=offset; 38 var sumS=offset-interval; 39 var url=$(this).attr("request-url"); 40 41 if(scrTop>=sumS && scrTop<=sumB){ 42 $(this).load(url,function(responseTxt,statusTxt,xhr){ 43 if (statusTxt=="success") { 44 $(this).removeClass(className); 45 $(this).unbind("lazyme"); 46 }; 47 }); 48 } 49 }); 50 } 51 </script> 52 53 </header> 54 <body style="height:3000px;"> 55 <div class="loading" style="border:1px solid black;position:absolute;top:800px;left:500px;width:300px;height:400px;" id="lazyu" request-url="requestU.html">abc</div> 56 <div class="loading" style="border:1px solid black;position:absolute;top:1400px;left:500px;width:300px;height:400px;" id="lazyu2" request-url="requestU2.html">abc2</div> 57 </body> 58 <footer> 59 </footer> 60 </html>
js图片懒加载
1 <div id="div1"> 2 <ul> 3 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170473_s_90_2_219x160.jpg"></li> 4 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170475_s_90_2_219x160.jpg"></li> 5 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170477_s_90_2_219x160.jpg"></li> 6 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 7 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 8 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 9 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 10 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 11 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 12 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 13 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 14 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 15 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 16 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 17 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 18 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 19 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 20 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 21 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 22 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 23 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 24 <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> 25 </ul> 26 </div>
图片的动态加载就是通过读取li元素，然后获得li元素的data-src属性的值赋予动态创建的图片的src，从而实现了图片的创建。
1 function setImg(index){ 2 var oDiv=document.getElementById("div1") 3 var oUl=oDiv.children[0]; 4 var aLi=oUl.children; 5 if (aLi[index].dataset) { 6 var src=aLi[index].dataset.src; 7 } else{ 8 var src=aLi[index].getAttribute('data-src'); 9 } 10 var oImg=document.createElement('img'); 11 oImg.src=src; 12 if (aLi[index].children.length==0) { 13 aLi[index].appendChild(oImg); 14 } 15 }
那么怎么识别是否在可视区域呢？这里需要一个函数，能够实现获得当前元素距离网页顶部的距离！
1 //获得对象距离页面顶端的距离 2 function getH(obj) { 3 var h = 0; 4 while (obj) { 5 h += obj.offsetTop; 6 obj = obj.offsetParent; 7 } 8 return h; 9 }
当网页的滚动条滚动时要时时判断当前li的位置！
1 window.onscroll = function () { 2 var oDiv = document.getElementById('div1'); 3 var oUl = oDiv.children[0]; 4 var aLi = oUl.children; 5 6 for (var i = 0, l = aLi.length; i < l; i++) { 7 var oLi = aLi[i]; 8 //检查oLi是否在可视区域 9 var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop); 10 var h = getH(oLi); 11 if (h < t) { 12 setTimeout("setImg(" + i + ")", 500); 13 } 14 } 15 };
当页面加载完成以后要主动运行一下window.onscroll，从而获得当前可视范围内的图片
1 window.onload = function () { 2 window.onscroll(); 3 };
另外，像这样的页面，障眼法和美化都是必须的，比如给每个li一个loading的图片作为背景，从而实现了当前图片正在加载的效果，美化工作就是做好合理的布局。
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 6 #div1 { 7 width: 520px; 8 margin: 30px auto; 9 border: 1px solid red; 10 overflow: hidden; 11 } 12 13 li { 14 width: 160px; 15 height: 160px; 16 float: left; 17 list-style: none; 18 margin: 5px; 19 background: url(loading.gif) center center no-repeat; 20 border: 1px dashed green; 21 } 22 img{ 23 width:100% 24 }
浙公网安备 33010602011771号