因為網(wǎng)頁模板里用的CSS文件或者JS文件（尤其是JQUERY）很可能不是本地文件。如果這個文件地址的服務器有障礙，那文件半天加載不上，頁面也就無法打開，即便打開也是混亂的。
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都做網(wǎng)站、網(wǎng)站設計、川匯網(wǎng)絡推廣、小程序制作、川匯網(wǎng)絡營銷、川匯企業(yè)策劃、川匯品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供川匯建站搭建服務，24小時服務熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
!--?頁面，可以使用絕對或者相對路徑?--?
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);
方法：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、打開測試，效果如下
首先 手機 和 PC 是2套頁面。
手機端，width： 100%就可以了。
pc， width： 可以直接寫死。
如果你會bootstrap 那更好了。它專門為響應式而生的框架。
我剛開始也在找這個問題的答案，現(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
1、在body中用onload:
body onload="myfunction()"
2、在腳本中用window.onload:
script type="text/javascript"function myfun(){alert("this window.onload");}/*用window.onload調用myfun()*/window.onload=myfun;//不要括號/script
下面這個例子在頁面完成加載之后改變id_1的背景顏色。
script language="javascript" function myfun() {document.getElementById("id_1").style.background= "#000"; // 改變背景顏色}// 用js實現(xiàn)在加載完成一個頁面后自動執(zhí)行一個方法/*用window.onload調用myfun()*/window.onload=myfun;//不要括號/script
重慶分公司
重慶分公司
