建站
咨詢
售后
建站咨詢
新聞中心
您好，我在網(wǎng)上下載的html5模版，打開網(wǎng)頁速度很慢，要等將近一分鐘才會彈出來，是怎么回事呀？
因為網(wǎng)頁模板里用的CSS文件或者JS文件（尤其是JQUERY）很可能不是本地文件。如果這個文件地址的服務器有障礙，那文件半天加載不上，頁面也就無法打開，即便打開也是混亂的。
專注于為中小企業(yè)提供成都網(wǎng)站建設、成都網(wǎng)站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)綏寧免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。
如何實現(xiàn)HTML5的預加載
!--?頁面，可以使用絕對或者相對路徑?--?
link?rel="prefetch"?href="page2.html"?/?
!--?圖片，也可以是其他類型的文件?--?
link?rel="prefetch"?href="sprite.png"?/
從上面的HTML代碼可以看出，預加載使用 link 標簽，并指定 rel="prefetch" 屬性，而href屬性就是需要預加載的文件路徑。而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é)議也同樣支持。
何時需要預加載?
網(wǎng)站是否采用預加載取決于你的需求，下面是一些建議：?
- 如果一系列的頁面幻燈片一樣展示，那么可以預加載前后各1至3個頁面.?
- 加載網(wǎng)站內(nèi)部通用的圖片?
- 在搜索結果頁預加載下一頁
阻止預加載?
Firefox 允許禁止預加載模式，代碼如下：?
user_pref("network.prefetch-next",?false);
html頁面怎么實現(xiàn)動態(tài)加載頁面
方法：1、直接貼圖：在界面上貼一個gif動態(tài)等待效果圖片，gif圖片獲取方式：網(wǎng)上找素材，會ps的可以自己制作img src="wait.gif" /
2、CSS3/SVG/HTML5 Canvas手動繪制等待效果：
這種效果：網(wǎng)上有很多類似素材，可以根據(jù)需要選擇，或使用上述技術繪制
下面提供一個CSS3繪制的范例
3、CSS的代碼如下：
style
.loading {
width:0;
height:0;
border-right:20px solid #fff;
border-top:20px solid #000;
border-left:20px solid #fff;
border-bottom:20px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.loading {
animation: bganim 0.6s linear 0s infinite;
-moz-animation: bganim 0.6s linear 0s infinite;
-webkit-animation: bganim 0.6s linear 0s infinite;
}
@keyframes bganim {
from { transform:rotate(0deg); } to { transform:rotate(360deg); }
}
@-moz-keyframes bganim {
from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes bganim {
from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); }
}
/style
4、labelCSS3效果/label，div class="loading"/div
效果如下圖：運行機制很簡單，先手動繪制一個靜態(tài)的圖，然后控制對應div進行360度旋轉，即可實現(xiàn)
5、使用js等待效果插件(如：spin.js)
6、JS代碼如下：
var opts = {
lines: 9,
length: 0,
width: 15,
radius: 20,
corners: 1,
rotate: 0,
direction: 1,
color: '#0101DF',
speed: 1,
trail: 34,
shadow: false,
hwaccel: false,
className: 'spinner',
zIndex: 2e9,
top: '50%',
left: '50%'
};
var target = document.getElementById('img_wait');
var spinner = new Spinner(opts).spin(target);
7、html代碼的引用：div id="img_wait"/div
8、打開測試，效果如下
html5如何做到使用導航欄切換頁面時不重新加載頁面
我剛開始也在找這個問題的答案，現(xiàn)在解決了，為后面學習的人栽棵樹吧。
實現(xiàn)這個功能有很多種方法，這里我選一種個人認為比較簡單的方法：
建立三個網(wǎng)頁，一個作為主頁面，另外兩個子頁面作為切換頁面嵌入主頁面，子頁面也可以用文字替代。
用jQuery方法來切換頁面，語言比較簡單網(wǎng)上搜一下看看就懂了
下面附上代碼
!DOCTYPE?html
html
head
meta?charset="UTF-8"
title標題/title
!--jQuery?百度CDN庫--
script?src=""/script
script
//?jQuery代碼
$(document).ready(function?()?{
$("#b1").click(function?()?{
$("#tab_1").show();//?顯示
$("#tab_2").hide();//?隱藏
});
$("#b2").click(function?()?{
$("#tab_1").hide();
$("#tab_2").show();
});
});
/script
/head
body
div
h1標題一/h1
/div
div
div
ul
libutton?id="b1"菜單1/button/li
libutton?id="b2"菜單2/button/li
/ul
/div
div
div?id="tab_1"
子頁面1
/div
div?id="tab_2"?style="display:?none"
子頁面2
/div
/div
/div
/body
/html
當前名稱：html5頁面加載,javascript頁面加載
網(wǎng)頁URL：http://www.dlmjj.cn/article/dsishhe.html
