如何利用html5制作出loading加載效果

我用css3寫了個demo

成都創(chuàng)新互聯(lián)主營鄢陵網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,APP應(yīng)用開發(fā),鄢陵h5重慶小程序開發(fā)公司搭建,鄢陵網(wǎng)站營銷推廣歡迎鄢陵等地區(qū)企業(yè)咨詢

html

head

meta charset="utf-8"/

titleLoading/title

style

.spinner {

margin: 100px auto;

width: 60px;

height: 60px;

text-align: center;

font-size: 10px;

}

.spinner div {

background-color: #67CF22;

height: 100%;

width: 6px;

display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;

animation: stretchdelay 1.2s infinite ease-in-out;

}

.spinner .rect2 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.spinner .rect3 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

.spinner .rect4 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.spinner .rect5 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

@-webkit-keyframes stretchdelay {

0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

20% { -webkit-transform: scaleY(1.0) }

}

@keyframes stretchdelay {

0%, 40%, 100% {

transform: scaleY(0.4);

-webkit-transform: scaleY(0.4);

} 20% {

transform: scaleY(1.0);

-webkit-transform: scaleY(1.0);

}

}

/style

/head

body

div class="spinner"

div class="rect1"/div

div class="rect2"/div

div class="rect3"/div

div class="rect4"/div

div class="rect5"/div

/div

/body

/html

如何實現(xiàn)HTML5的預(yù)加載

!--?頁面，可以使用絕對或者相對路徑?--?

link?rel="prefetch"?href="page2.html"?/?

!--?圖片，也可以是其他類型的文件?--?

link?rel="prefetch"?href="sprite.png"?/

從上面的HTML代碼可以看出，預(yù)加載使用 link 標簽，并指定 rel="prefetch" 屬性，而href屬性就是需要預(yù)加載的文件路徑。而Mozilla還實現(xiàn)了一些類似的 link rel 屬性:

link?rel="prefetch?alternate?stylesheet"?title="Designed?for?Mozilla"?href="mozspecific.css"?/?

link?rel="next"?href="2.html"?/

備注： https 協(xié)議也同樣支持。

何時需要預(yù)加載?

網(wǎng)站是否采用預(yù)加載取決于你的需求，下面是一些建議：?

- 如果一系列的頁面幻燈片一樣展示，那么可以預(yù)加載前后各1至3個頁面.?

- 加載網(wǎng)站內(nèi)部通用的圖片?

- 在搜索結(jié)果頁預(yù)加載下一頁

阻止預(yù)加載?

Firefox 允許禁止預(yù)加載模式，代碼如下：?

user_pref("network.prefetch-next",?false);

html5的優(yōu)點

HTML5為什么如此受歡迎？主要因為它本身的優(yōu)勢。HTML5的主要優(yōu)勢如下：

1、基于HTML5強大的兼容性。因為HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口，使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)，就因為這種強大的兼容性，使得在當(dāng)下開發(fā)界是如此的火，同樣也是因為這強大的兼容性，使得手機應(yīng)用軟件，app更適合，也更方便。所以更適合手機app軟件開發(fā)，正好補充了手機小巧的不足。

2、HTML5開發(fā)支持的手機系統(tǒng)有android、ios。

3、HTML5其突出的特點就是強化了web頁的表現(xiàn)性,追加了本地數(shù)據(jù)庫，可以用作離線應(yīng)用的開發(fā)，離線應(yīng)用就是把需要的資源先緩存到本地，下次再查看時無需聯(lián)網(wǎng)。

4、HTML5開發(fā)能提供更快、更簡便的服務(wù)，代碼可高度重用，服務(wù)發(fā)布方便。

5、動畫、游戲動態(tài)效果，地理定位等很多app應(yīng)用正在崛起，而HTML5技術(shù)的強大優(yōu)勢就是這種讓我們驚嘆的效果。而未來采用HTML5開發(fā)app的，將會大量減少代碼量，應(yīng)用軟件也會得到更高的用戶體驗，更好的視覺效果。

如何利用HTML5實現(xiàn)等待加載動畫的效果

script

document.onreadystatechange=function(){

if(document.readyState=='complete'){

$('.loading').fadeOut();

}

}

/script

HTML5+CSS3小實例：手風(fēng)琴式加載動畫

HTML5+CSS3做一個手風(fēng)琴式的加載動畫，這動畫、這質(zhì)感、這配色，就問你喜不喜歡？！這個案例的知識點主要是：css的自定義屬性 + 動畫延遲 + 顏色濾鏡（hue-rotate）。

效果：

源碼：

分享文章：html5加載效果,html5預(yù)加載
分享鏈接：http://chinadenli.net/article27/dsggcjj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、網(wǎng)站收錄、網(wǎng)站維護、外貿(mào)網(wǎng)站建設(shè)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)