懒加载
懒加载就是判断图片是否出现在浏览器的可视窗口内,如果出现在该区域,就请求此图片。需要的参数
窗口的
scrollTop
和窗口的高度height
12345678//窗口的scrollTop值var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;或者var scrollTop=$(window).scrollTop();//窗口的高度var height=document.body.offsetHeight || document.documentElement.offsetHeight;或者var height=$(window).height();图片距离整个网页顶部的距离
offsetTop
1var imgTop=img.offsetTop;
所需要的参数都计算好以后,就判断,元素是否出现在浏览器的可视窗口内。
结果如下图:
预加载
在图片墙中,我们会把相同宽度,不同高度的图片放在一起,但是图片需要请求,没请求成功之前,我们获取不到它的高度,所以需要图片预加载。
- 代码:12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273html代码为:<style>*{margin:0;padding:0;}.box{min-width:280px;position: relative;margin:0 auto;}.box img{width:270px;position:absolute;}</style><div class="box"></div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">var width=270;var margin=10;//图片进行预加载var count=0;var imgArr=[];for(var i=0;i<14;i++){var readyImg=new Image();readyImg.src="./img/"+(i+1)+".jpg";imgArr.push(readyImg);imgArr.onload=function(){count++;if(count==14){start();}}}//图片的生成var isF=true;var topArr=[];function start(){var cols=parseInt($(window).width()/(width+margin));if(topArr.length==cols && cols!=0){return;}topArr.length=cols==0?1:cols;$(".box").width(cols*(margin+width));for(var i=0;i<topArr.length;i++){topArr[i]=0;}//生成图片for(var j=0;j<14;j++){var img=imgArr[j];var minIndex=0;for(var a=1;a<topArr.length;a++){if(topArr[a]<topArr[minIndex]){minIndex=a;}}img.style.top=topArr[minIndex]+margin+'px';img.style.left=minIndex*(margin+width)+'px';if(isF){$(".box").append(img);}topArr[minIndex]+=img.offsetHeight+margin;}isF=false;}//改变窗口大小时window.onresize=function(){start();}</script>
结果如下图: