<div id="loading5">
 <div class="demo5"></div>
 </div>

幾個(gè)簡(jiǎn)單的加載中動(dòng)畫(huà)吧。

像前面三種都是相當(dāng)于幾個(gè)不同的點(diǎn)輪流來(lái)播放同一動(dòng)畫(huà)：變大變小。css3里面有一個(gè)用于尺度變換的方法：scale(x,y)：定義 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾群透叨?/strong>。

第四種就是一個(gè)小球從上往下跌落，再?gòu)椈厝ィ谏厦娴臅r(shí)候速度最小，下面的時(shí)候速度最大。由于該小球只進(jìn)行了上下的移動(dòng)，所以我們可以運(yùn)用：translateY(n)：定義 2D 轉(zhuǎn)換，沿著 Y 軸移動(dòng)元素，從而實(shí)現(xiàn)小球沿Y方向來(lái)回移動(dòng)。

廢話不多說(shuō)了，上代碼。

首先，第一個(gè)加載中的動(dòng)畫(huà)：

html Code

<div id="loading1">
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
 </div>

css Code

.demo1 {
     width: 4px;
     height: 4px;
     border-radius: 2px;
     background: #68b2ce;
     float: left;
     margin: 0 3px;
     animation: demo1 linear 1s infinite;
     -webkit-animation: demo1 linear 1s infinite;
 }
 .demo1:nth-child(1){
     animation-delay:0s;
 }
 .demo1:nth-child(2){
     animation-delay:0.15s;
 }
 .demo1:nth-child(3){
     animation-delay:0.3s;
 }
 .demo1:nth-child(4){
     animation-delay:0.45s;
 }
 .demo1:nth-child(5){
     animation-delay:0.6s;
 }
 @keyframes demo1 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scale(2.5);}
 }
 @-webkit-keyframes demo1 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scale(2.5);}
 }

css Code

第二個(gè)動(dòng)畫(huà)和第一個(gè)動(dòng)畫(huà)大同小異，第一個(gè)動(dòng)畫(huà)是將小球整體變大變小，第二動(dòng)畫(huà)則是將小方塊的高度變大變小，而寬度不變：

html Code

 <div id="loading2">
     <div class="demo2"></div>
     <div class="demo2"></div>
     <div class="demo2"></div>
     <div class="demo2"></div>
     <div class="demo2"></div>
 </div>

css Code

.demo2 {
     width: 4px;
     height: 6px;
     background: #68b2ce;
     float: left;
     margin: 0 3px;
     animation: demo2 linear 1s infinite;
     -webkit-animation: demo2 linear 1s infinite;
 }
 .demo2:nth-child(1){
     animation-delay:0s;
 }
 .demo2:nth-child(2){
     animation-delay:0.15s;
 }
 .demo2:nth-child(3){
     animation-delay:0.3s;
 }
 .demo2:nth-child(4){
     animation-delay:0.45s;
 }
 .demo2:nth-child(5){
     animation-delay:0.6s;
 }
 @keyframes demo2 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scaleY(3);}
 }
 @-webkit-keyframes demo2 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scaleY(3);}
 }

css Code

第三個(gè)動(dòng)畫(huà)就需要將小球的位置定位一下，讓幾個(gè)小球整體上看起來(lái)圍成一個(gè)圓，然后就像第一個(gè)一樣使小球變大變小：

html Code

 <div id="loading1">
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
 </div>

css Code

#loading3 {
     position: relative;
     width: 50px;
     height: 50px;
 }
 .demo3 {
     width: 4px;
     height: 4px;
     border-radius: 2px;
     background: #68b2ce;
     position: absolute;
     animation: demo3 linear 0.8s infinite;
     -webkit-animation: demo3 linear 0.8s infinite;
 }
 .demo3:nth-child(1){
     left: 24px;
     top: 2px;
     animation-delay:0s;
 }
 .demo3:nth-child(2){
     left: 40px;
     top: 8px;
     animation-delay:0.1s;
 }
 .demo3:nth-child(3){
     left: 47px;
     top: 24px;
     animation-delay:0.1s;
 }
 .demo3:nth-child(4){
     left: 40px;
     top: 40px;
     animation-delay:0.2s;
 }
 .demo3:nth-child(5){
     left: 24px;
     top: 47px;
     animation-delay:0.4s;
 }
 .demo3:nth-child(6){
     left: 8px;
     top: 40px;
     animation-delay:0.5s;
 }
 .demo3:nth-child(7){
     left: 2px;
     top: 24px;
     animation-delay:0.6s;
 }
 .demo3:nth-child(8){
     left: 8px;
     top: 8px;
     animation-delay:0.7s;
 }
 
 @keyframes demo3 
 {
     0%,40%,100% {transform: scale(1);}
     20% {transform: scale(3);}
 }
 @-webkit-keyframes demo3 
 {
     0%,40%,100% {transform: scale(1);}
     20% {transform: scale(3);}
 }

接下來(lái)是第四個(gè)動(dòng)畫(huà)：

1 <div id="loading5">
2      <div class="demo5"></div>
3 </div>

 #loading5 {
     width: 20px;
     height: 100px;
     border-bottom: 1px solid #68b2ce;
 }
 .demo5 {
     width: 20px;
     height: 20px;
     border-radius: 10px;
     background: #68b2ce;
     animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
     -webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
 }
 @keyframes demo5
 {
     0%{
         transform:translateY(0px);
         -webkit-transform:translateY(0px);
     }
     100% {
         transform:translateY(80px);
         -webkit-transform:translateY(80px);
     }
 }
 @-webkit-keyframes demo5
 {
     0%{
         transform:translateY(0px);
         -webkit-transform:translateY(0px);
     }
     100% {
         transform:translateY(80px);
         -webkit-transform:translateY(80px);
     }
 }

css Code

以上就是這幾個(gè)簡(jiǎn)單的加載中小動(dòng)畫(huà)的內(nèi)容了。

轉(zhuǎn)載 https://www.cnblogs.com/tangchan/p/7604594.html

么是JS延遲加載？

JS延遲加載，也就是等頁(yè)面加載完成之后再加載JavaScript文件

為什么讓JS實(shí)現(xiàn)延遲加載？

js的延遲加載有助于提高頁(yè)面的加載速度。

Js延遲加載的方式有哪些？一般有以下幾種方式：

·defer屬性

·async屬性

·動(dòng)態(tài)創(chuàng)建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標(biāo)簽定義了defer屬性。

用途：表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造。也就是說(shuō)，腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢之后再執(zhí)行在<script>元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行

<!DOCTYPE html>
<html>
<head>
	<script src="test1.js" defer="defer"></script>
	<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>

說(shuō)明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實(shí)當(dāng)中，延遲腳本并不一定會(huì)按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實(shí)現(xiàn)會(huì)忽略嵌入腳本設(shè)置的defer屬性

2、async屬性

HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類(lèi)似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類(lèi)似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。

目的：不讓頁(yè)面等待腳本下載和執(zhí)行，從而異步加載頁(yè)面其他內(nèi)容。異步腳本一定會(huì)在頁(yè)面 load 事件前執(zhí)行。不能保證腳本會(huì)按順序執(zhí)行

<!DOCTYPE html>
<html>
	<head>
		<script src="test1.js" async></script>
		<script src="test2.js" async></script>
	</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>

async和defer一樣，都不會(huì)阻塞其他資源下載，所以不會(huì)影響頁(yè)面的加載。

缺點(diǎn)：不能控制加載的順序

3、動(dòng)態(tài)創(chuàng)建DOM方式

//這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近HTML文件底部)
<script type="text/javascript">
	function downloadJSAtOnload() {
		varelement = document .createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window. addEventListener)
		window.addEventListener("load" ,downloadJSAtOnload, false);
	else if (window.attachEvent)
		window.attachEvent("onload", downloadJSAtOnload) ;
	else
		window. onload =downloadJSAtOnload;
</script>

4、使用jQuery的getScript()方法

$.getScript("outer.js" , function(){	//回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
	console.log(“腳本加載完成")
});

5、使用setTimeout延遲方法的加載時(shí)間延遲加載js代碼，給網(wǎng)頁(yè)加載留出更多時(shí)間

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延遲1秒
	})
</script>

6、讓JS最后加載

把js外部引入的文件放到頁(yè)面底部，來(lái)讓js最后引入，從而加快頁(yè)面加載速度例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁(yè)面加載前該js腳本就會(huì)被加載入頁(yè)面，而放入body中，則會(huì)按照頁(yè)面從上倒下的加載順序來(lái)運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁(yè)面底部，來(lái)讓js最后引入，從而加快頁(yè)面加載速度。

上述方法2也會(huì)偶爾讓你收到Google頁(yè)面速度測(cè)試工具的“延遲加載javascript”警告。所以這里的解決方案將是來(lái)自Google幫助頁(yè)面的推薦方案。

//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近HTML文件底部)

<script type= "text/javascript">
	function downloadJSAtonload() {
		var element = document.createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window.addEventListener)
		window.addEventListener("load", downloadJSAtOnload, false);
	else if (window.attachEvent )
		window.attachEvent("onload", downloadJSAtonload);
	else window.onload = downloadJSAtOnload;
</script>

這段代碼意思等到整個(gè)文檔加載完后，再加載外部文件“defer.js”。

使用此段代碼的步驟：

6.1）復(fù)制上面代碼

6.2）粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)

6.3）修改“defer.js”為你的外部JS文件名

6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。

注意：

這段代碼直到文檔加載完才會(huì)加載指定的外部js文件。因此，不應(yīng)該把那些頁(yè)面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁(yè)面需要而立即加載的javascript代碼，另外一組是在頁(yè)面加載后進(jìn)行操作的javascript代碼(例如添加click事件。