预加载懒加载瀑布流 this的理解

最新推荐文章于 2023-02-24 10:22:05 发布

敲代码的皮皮

最新推荐文章于 2023-02-24 10:22:05 发布

阅读量177

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/cc12345_10/article/details/116275503

版权

1.预加载


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>预加载</title>
		<style type="text/css">
			* {
				margin:0;
				padding: 0;
			}
			.load {
				width:100%;
				height:100%;
				position: fixed;
				left: 0;
				top: 0;
				background: rgba(0,0,0,0.3);
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.load span {
				display: block;
				width:100px;
				height:100px;
				font-size:50px;
				color:#f60;
				text-align: center;
				line-height:100px;
				border-radius:50%;
				background:#fff;
			}
			.load span em {
				font-style: normal;
			}
		</style>
	</head>
	<body>
		<div class="load">
			<span><em id="num">0</em>%</span>
		</div>
		<img src="../images/1.jpg" >
		<img src="../images/2.jpg" >
		<img src="../images/3.jpg" >
		<img src="../images/4.jpg" >
	</body>
</html>
<script type="text/javascript">
	/*
	预加载：先让用户等待一会儿，一般结合进度条。此时加载项目中用到的所有请求耗时很多的资源，目的是提高用户体验。
	作用：通过预加载，可以实现用户在浏览网页的时候，所有的资源全部加载完毕
	
	预加载步骤
	1.写一个数组，里面存放想预加载的所有图片路径，该路径可以是网络路径，也可以是相对路径
	2.封装一个预加载函数
	
	*/
   // 需要预加载的图片
   var imgs = ['../images/1.jpg','../images/2.jpg','../images/3.jpg','../images/4.jpg','../images/1.jpg','../images/2.jpg','../images/3.jpg','../images/4.jpg','../images/1.jpg','../images/2.jpg','../images/3.jpg','../images/4.jpg','../images/1.jpg','../images/2.jpg','../images/3.jpg','../images/4.jpg'];
   //获取进图条的元素
   var num = document.getElementById("num");
   
   /*
   preload函数具有两个参数，第一个是存放资源的数组，第二个是回调函数
   回调函数就是当前操作完成以后，执行的函数，在此例中，回调函数可有可无
   */
   function preload(arr,callBack){
	   // 使用index来记录读取完毕的图片数量
	   var index = 0;
	   // 数组长度
	   var len = arr.length;
	   
	   for(var i=0;i<len;i++){
		   //创建一个image对象
		   // var img = new Image();
		   var img = document.createElement('img');
		   
		   //给img添加src
		   img.src = arr[i];
		   //监听图片对象加载完毕，触发load事件
		   
		   img.οnlοad=function(){
			   index++;
			   num.innerHTML = Math.floor(index/len*100);
			   console.log(num.innerHTML);
			   //判断加载完毕的时候
			   if(index==len){
				   console.log('加载完毕');
				   //如果callBack存在，则执行该函数
				   callBack&&callBack();
			   }
		   };
	   }
	   
	   // loadedmetadata 该方法是用来加载音视频的
   }
   //调用预加载
   preload(imgs,function(){
	   var load = document.querySelector('.load');
	   load.style.display = 'none';
   });
</script>

2.懒加载


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>懒加载</title>
		<style type="text/css">
			* {
				margin:0;
				padding:0;
			}
			img {
				width:600px;
				height:400px;
				display:inline-block;
			}
			.go-top {
				cursor: pointer;
				width:100px;
				height:100px;
				background: rgba(0,0,0,0.2);
				position: fixed;
				right:10px;
				bottom:10px;
			}
		</style>
	</head>
	<body>
		<div class="go-top">
			回到顶部
		</div>
		<img src="../images/a.jfif" ourl="../images/1.jpg" />
		<img src="../images/a.jfif" ourl="../images/2.jpg" />
		<img src="../images/a.jfif" ourl="../images/3.jpg" />
		<img src="../images/a.jfif" ourl="../images/4.jpg" />
		<img src="../images/a.jfif" ourl="../images/1.jpg" />
		<img src="../images/a.jfif" ourl="../images/2.jpg" />
		<img src="../images/a.jfif" ourl="../images/3.jpg" />
		<img src="../images/a.jfif" ourl="../images/4.jpg" />
		<img src="../images/a.jfif" ourl="../images/1.jpg" />
		<img src="../images/a.jfif" ourl="../images/2.jpg" />
		<img src="../images/a.jfif" ourl="../images/3.jpg" />
		<img src="../images/a.jfif" ourl="../images/4.jpg" />
		<img src="../images/a.jfif" ourl="../images/1.jpg" />
		<img src="../images/a.jfif" ourl="../images/2.jpg" />
		<img src="../images/a.jfif" ourl="../images/3.jpg" />
		<img src="../images/a.jfif" ourl="../images/4.jpg" />
		<img src="../images/a.jfif" ourl="../images/1.jpg" />
		<img src="../images/a.jfif" ourl="../images/2.jpg" />
		<img src="../images/a.jfif" ourl="../images/3.jpg" />
		<img src="../images/a.jfif" ourl="../images/4.jpg" />
		<img src="../images/a.jfif" ourl="../images/1.jpg" />
		<img src="../images/a.jfif" ourl="../images/2.jpg" />
		<img src="../images/a.jfif" ourl="../images/3.jpg" />
		<img src="../images/a.jfif" ourl="../images/4.jpg" />
		<img src="../images/a.jfif" ourl="../images/1.jpg" />
		<img src="../images/a.jfif" ourl="../images/2.jpg" />
		<img src="../images/a.jfif" ourl="../images/3.jpg" />
		<img src="../images/a.jfif" ourl="../images/4.jpg" />
	</body>
</html>
<script type="text/javascript">
	/*
	懒加载
	用户确定想要看这张图片资源的时候，才去加载该图片资源
	
	获取浏览器的可视高度
	1. window.innerHeight ie8及其以下不兼容
	2. document.documentElement.clientHeight ie和标准浏览器都支持
	
	获取浏览器的滚动距离
	document.documentElement.scrollTop
	
	*/
   // console.log(window.innerHeight);
   // console.log(document.documentElement.clientHeight);
   // 鼠标滚动事件
   /* window.onscroll = function(){
	   console.log(document.documentElement.scrollTop);
   }; */
   //获取所有的img
   var imgs = document.images;
   var len = imgs.length;
   console.log(imgs);
   
   //鼠标滚动
   window.onscroll = function(){
	   show();
   };
   show(); //首先调用show，让前几行图片显示
   function show(){
	   for(var i=0;i<len;i++){
		   // console.log(i);
		   var myurl = imgs[i].getAttribute('ourl');
		   if(myurl && getTop(imgs[i]) <= scrollHeight()+screenHeight()-400 ){
			   // var myurl = imgs[i].getAttribute('ourl');
			   imgs[i].src = myurl;
			   //删除ourl属性
			   imgs[i].removeAttribute('ourl');
		   }
	   }
   }
   //获取元素距离页面顶部的距离
   function getTop(obj){
	   if(obj.offsetParent==null){
		   //obj是body
		   return 0;
	   }
	   return obj.offsetTop + obj.offsetParent.clientTop + getTop(obj.offsetParent);
   }
   //获取浏览器的滚动距离
   function scrollHeight(){
	   return document.documentElement.scrollTop;
   }
   //获取整个屏幕的可视高度
   function screenHeight(){
	   return document.documentElement.clientHeight;
   }
   
   // 点击回到顶部
   var goTop = document.querySelector('.go-top');
   var timmer;
   goTop.onclick = function(){
	   var top = document.documentElement.scrollTop;
	   timmer=setInterval(function(){
		   top-=10;
		   document.documentElement.scrollTop = top;
		   if(top<=500){
			   clearInterval(timmer);
		   }
	   },20);
   };
</script>

3.瀑布流


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>瀑布流</title>
		<style type="text/css">
			* {
				margin:0;
				padding: 0;
			}
			ul,li {
				list-style-type:none;
			}
			.wp {
				overflow: hidden;
			}
			ul {
				margin:0 10px;
				border:1px #f00 solid;
				width:calc(25% - 22px);
				float: left;
			}
			ul li {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size:50px;
				margin-bottom:20px;
			}
		</style>
	</head>
	<body>
		<div class="wp">
			<ul></ul>
			<ul></ul>
			<ul></ul>
			<ul></ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	var ul = document.querySelectorAll('ul');
	
	function rand(m,n){
		return Math.floor(Math.random()*(n-m+1)+m);
	}
	//随机颜色
	function randCol(){
		var r = rand(0,255);
		var g = rand(0,255);
		var b = rand(0,255);
		return 'rgb('+r+','+g+','+b+')';
	}
	
	// 创建li函数，参数为创建的个数
	function createLi(len){
		for(var i=0;i<len;i++){
			var newLi = document.createElement('li');
			newLi.style.height = rand(60,200)+'px';
			newLi.style.background = randCol();
			newLi.innerHTML = i+1;
			//创建一个数组，用来存放四个ul的高度
			var arrH=[];
			for(var k=0;k<ul.length;k++){
				arrH.push(ul[k].offsetHeight);
			}
			// 获取数组中的最小值
			var minH = Math.min.apply(null,arrH);
			// 获取最小值所在的下标
			var index = arrH.indexOf(minH);
			// index下标，就是高度最小的ul的下标
			ul[index].appendChild(newLi);
		}
	}
	createLi(30);
	
	//获取浏览器的滚动距离
	function scrollHeight(){
		return document.documentElement.scrollTop;
	}
	//获取整个屏幕的可视高度
	function screenHeight(){
		return document.documentElement.clientHeight;
	}
	
	window.onscroll = function(){
		var arrH=[];
		for(var k=0;k<ul.length;k++){
			arrH.push(ul[k].offsetHeight);
		}
		var maxH = Math.max.apply(null,arrH);
		if(maxH <= scrollHeight()+screenHeight()+10){
			createLi(30);
		}
	};
	
</script>

4.this的理解


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>this的理解</title>
	</head>
	<body>
		<button type="button" id="btn">点击</button>
		<div id="wp">
			李元霸
		</div>
	</body>
</html>
<script type="text/javascript">
	/*
	this 跟函数在哪里定义没有半毛钱关系，函数在哪里调用才决定了this到底是个啥，也即是说，this跟函数的定义没有关系，跟函数的执行有大大的关系，记住：函数在哪里调用，才决定的this到底引用的是谁
	*/
   function change(){
	   this.innerHTML = '秦叔宝';
   }
   var btn = document.getElementById("btn");
   btn.onclick = change;
   var wp = document.getElementById("wp");
   wp.onclick = change;
   
   function show(){
	   console.log(this);
   }
   window.show();
   var obj = {
	   a:'宇文成都',
	   show:function(){
	     console.log(this);
	   }
   };
   obj.show();
   /**
	this 的作用
	1.默认绑定全局变量
	2.隐式绑定
	*/ 
   var a = '裴元庆';
   function run(){
	   console.log(this.a);
   }
   run();
   var obj1 = {
	   a:'熊阔海',
	   run:run
   };
   obj1.run();
   /*
   3.显式绑定
   call / apply
   
   Function.apply(obj,args) apply方法接收两个参数
   obj：这个对象，将替代Function里面的this
   args: apply中第二个参数是一个数组，他可以作为参数传给Function
   
   Function.call(obj,args1,args2,args3...)
   obj：这个对象，将替代Function里面的this
   从第二个参数开始，是一个参数列表
   
   */
	function add(a,b){
		console.log(a+b);
	}
	function aub(a,b){
		console.log(a-b);
	}
	add.call(aub,3,1);
	
	var obj = {
		abc:'伍天锡'
	};
	var abc = '伍云召';
	
	function wu(){
		console.log(this.abc);
	}
	// wu.call(obj); //arguments
	/*
	通过 wu.call(obj) ，该表达式是立即执行的，他是把obj作为一个对象，去替代了wu中的this，也就是说，此刻wu中的this，代表的是obj
	this.abc 也就是 obj.abc
	*/
	wu.apply(obj);
	/*
	call() 和 apply() 的区别：他们的功能一样，第二个参数不一样，call是传递多个参数，形式任意；apply的第二个参数必须是数组形式
	bind() 方法，第一个参数是this，后续的参数可以作为函数的参数传入到函数中，bind()方法和call apply相似，也可以改变this的指向
	*/
   
   //计时器里面的this指的是window
   var obj2 = {
	   abc:'罗成',
	   show:function(){
		  setTimeout(function(){
			 console.log(this.abc);
		  }.bind(this),2000);
	   }
   };
   
	obj2.show();
	/*
	如果你希望改变上下文环境之后并非立即执行，而是在回调执行的时候改变this，你可以使用bind
	如果你希望函数立即执行，则可以使用call或者apply
	*/ 
   var ok = function(){
	   console.log(this.abc);
   }.bind(obj2);
   ok();
   /*
   再总结
   1.call apply 和 bind 三者都是用来改变函数的this指向的
   2.call apply 和 bind 三者的第一个参数都是函数中this要指向的对象
   3.call apply 和 bind 三者都是利用后续参数传参
   4.call apply是立即调用，bind是返回对应的函数，便于稍后调用
   */ 
</script>