预加载、懒加载

最新推荐文章于 2023-11-19 23:55:04 发布

werch

最新推荐文章于 2023-11-19 23:55:04 发布

阅读量92

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42666092/article/details/115459845

版权

js 专栏收录该内容

54 篇文章 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.onload=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>

werch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
预加载、懒加载

<!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;
复制链接

扫一扫