案例-懒加载-web-javascript学习

来源：互联网发布：经典网络仙侠文编辑：程序博客网时间：2024/05/16 01:17
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>懒加载</title><style>body,html{width:100%;margin:0;padding:0;}#box{width:100%;}#box ul{width:840px;padding:0px;margin:0 auto;overflow:hidden;}#box ul li{float:left;list-style: none;width:190px;background:#fff;padding:5px;margin:5px;box-shadow:0 0 5px #333;}#box ul li img{width:100%;transition:1s;}</style></head><body><div id="box"><ul><li></li><li></li><li></li><li></li></ul></div><script src="../../js/jquery.min.js"></script><script>/*效果：鼠标向下滚动不断显示图片，并且带过度性的展示实现思路：1.首先纵向布局，四列；2.把图片的路径写到一个json数组arr；3.定义一个全局变量i，很关键的一个变量：①控制当前循环次数。②用当前循环次数，来%（取余）数组长度，可以获取图片路径，（0-（数组长度-1）），这里是0-114.定义一个 getList() 方法用来计算四列的高度，然后返回高度最短的那个，用来摆放当前创建的图片，每次创建图片都需要计算当前列的高度，（考虑到有的图片长度过长，若每次都只往一列排列，那会导致有的列空白较多），5.定义一个方法 create() 功能： 创建一个父级div和子级一个img标签，同时设置img的src以及该图片出现的渐变过程。6.定义一个 upload()方法，功能：① 刷新默认预加载12张图片；② 当鼠标下拉时，每次创建3张。*/var arr = [{src:'images/1.png'},{src:'images/2.jpg'},{src:'images/3.jpg'},{src:'images/4.jpg'},{src:'images/5.jpg'},{src:'images/6.jpg'},{src:'images/7.jpg'},{src:'images/8.jpg'},{src:'images/9.jpg'},{src:'images/10.jpg'},{src:'images/11.jpg'},{src:'images/12.jpg'},];var i=0;//执行次数function create(){var oDiv=document.createElement('div');var oImg = new Image();//实例化一个图片对象oImg.style.cssText='transform:scale(0)';//初始化图片比例为0，配合css的transition:1s,然后把scale变成1，即可实现图片出现的效果oImg.src = arr[i%arr.length].src;//取余范围0-11console.info('i%arr.length: '+i+' % '+arr.length+' = '+i%arr.length)oDiv.appendChild(oImg);//在div中添加一个图片节点// 把盒子放到最短的li里面getList($('#box ul li')).append(oDiv);(function(oImg){setTimeout(function(){oImg.style.cssText='transform:scale(1)';},100);})(oImg)}// 定义一个函数 找到最短的li obj穿餐进去，所有li的集合 返回最短的li对象function getList(obj){var oLi;//初始化一个变量，返回一个最短的li对象var len = obj.length;//获取列数var h = Infinity;//无限大的值；for(var i=0;i<len;i++){//那当前行的第一个比较其他三个，获取高度最小的if(obj.eq(i).height()<h){h=obj.eq(i).height();oLi=obj.eq(i);}}return oLi;}// 加载var sum;upload();function upload(){// 页面刷新预加载12张if(i<12){for(;i<12;i++){create();//预加载12次图片}}else{sum=i;for(;i<sum+3;i++){//除了预加载的，剩下的及时每次加载3次，也就是创建3张create();}}}var scrollT='';//滚动条高度var scrollH='';$(function(){var _height = $(window).height();//获取可视区域的高度$(window).scroll(function(){scrollT = document.body.scrollTop;//获取滚动条高度scrollH = document.body.scrollHeight;//获取文档高度(可以理解为滚动条可以滚动的总高度)if(scrollT + _height +50 >scrollH){//upload();}});})</script></body></html>
阅读全文
0 0