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

最新推荐文章于 2023-05-24 23:10:41 发布

kaiking_g

最新推荐文章于 2023-05-24 23:10:41 发布

阅读量811

点赞数

分类专栏： js-案例 javascript css 文章标签： css3 javascript jQuery

本文链接：https://blog.csdn.net/u013299635/article/details/72983552

版权

javascript 同时被 3 个专栏收录

88 篇文章 2 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

js-案例

10 篇文章 0 订阅

订阅专栏

<!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-11
				4.定义一个 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-11
			console.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>

kaiking_g

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
案例-懒加载-web-javascript学习

懒加载 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:
复制链接

扫一扫