一、方法引用來源和應用
此動態加載css方法 loadCss，剝離自Sea.js，并做了進一步的優化（優化代碼后續會進行分析）。
因為公司項目需要用到懶加載來提高網站加載速度，所以將非首屏渲染必需的css文件進行動態加載操作。
二、優化后的完整代碼
/*
* @function 動態加載css文件
* @param {string} options.url -- css資源路徑
* @param {function} options.callback -- 加載后回調函數
* @param {string} options.id -- link標簽id
*/
function loadCss(options){
var url = options.url,
callback = typeof options.callback == "function" ? options.callback : function(){},
id = options.id,
node = document.createElement("link"),
supportOnload = "onload" in node,
isOldWebKit = +navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i, "$1") < 536, // webkit舊內核做特殊處理
protectNum = 300000; // 閾值10分鐘，一秒鐘執行pollCss 500次
node.rel = "stylesheet";
node.type = "text/css";
node.href = url;
if( typeof id !== "undefined" ){
node.id = id;
}
document.getElementsByTagName("head")[0].appendChild(node);
// for Old WebKit and Old Firefox
if (isOldWebKit || !supportOnload) {
// Begin after node insertion
setTimeout(function() {
pollCss(node, callback, 0);
}, 1);
return;
}
if(supportOnload){
node.onload = onload;
node.onerror = function() {
// 加載失敗(404)
onload();
}
}else{
node.onreadystatechange = function() {
if (/loaded|complete/.test(node.readyState)) {
onload();
}
}
}
function onload() {
// 確保只跑一次下載操作
node.onload = node.onerror = node.onreadystatechange = null;
// 清空node引用，在低版本IE，不清除會造成內存泄露
node = null;
callback();
}
// 循環判斷css是否已加載成功
/*
* @param node -- link節點
* @param callback -- 回調函數
* @param step -- 計步器，避免無限循環
*/
function pollCss(node, callback, step){
var sheet = node.sheet,
isLoaded;
step += 1;
// 保護，大于10分鐘，則不再輪詢
if(step > protectNum){
isLoaded = true;
// 清空node引用
node = null;
callback();
return;
}
if(isOldWebKit){
// for WebKit < 536
if(sheet){
isLoaded = true;
}
}else if(sheet){
// for Firefox < 9.0
try{
if(sheet.cssRules){
isLoaded = true;
}
}catch(ex){
// 火狐特殊版本，通過特定值獲知是否下載成功
// The value of `ex.name` is changed from "NS_ERROR_DOM_SECURITY_ERR"
// to "SecurityError" since Firefox 13.0. But Firefox is less than 9.0
// in here, So it is ok to just rely on "NS_ERROR_DOM_SECURITY_ERR"
if(ex.name === "NS_ERROR_DOM_SECURITY_ERR"){
isLoaded = true;
}
}
}
setTimeout(function() {
if(isLoaded){
// 延遲20ms是為了給下載的樣式留夠渲染的時間
callback();
}else{
pollCss(node, callback, step);
}
}, 20);
}
}
三、解析代碼
一、參數
本方法支持三個參數，可進行擴展。
1.1 opations.url
url是需要引入的css資源路徑，也即標簽的href屬性內容。
1.2 options.id
id是標簽的id屬性。這個參數為非必要參數，可不傳。主要作用是標記當前標簽，方便js進行查找，以確定是否已加載某個css文件。
1.3 options.callback
callback是css文件加載完成后會調用的回調函數。也存在特殊場景下，文件加載失敗，回調函數仍舊執行的情況。
二、生成標簽，并插入頭部head，進行加載資源
var url = options.url,
callback = typeof options.callback == "function" ? options.callback : function(){},
id = options.id,
node = document.createElement("link");
node.rel = "stylesheet";
node.type = "text/css";
node.href = url;
if( typeof id !== "undefined" ){
node.id = id;
}
document.getElementsByTagName("head")[0].appendChild(node);
生成一個dom節點，然后配置好rel、type、href等必需的屬性值，以便瀏覽器能正常解析鏈接的資源。
接著，查找到head節點，將節點插入。
三、實現css資源下載狀態監控的pollCss方法
pollCss方法的職責是判斷插入的link節點，也即node變量反饋資源是否已加載完成。
3.1 判斷的主要依據
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。