如何使用js檢測html的加載數據

我擁有的概念是爲我的網站創建預加載器html。在閃光，當我需要檢測加載的數據，並將其與總數據，以創建我用下面的AS3代碼加載條比較：如何使用js檢測html的加載數據

var total:Number = this.stage.loaderInfo.bytesTotal; 
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

現在我正在尋找類似的事情，在JS。但是這次我需要找到所有外部資產的大小，並將其與已加載的金額進行比較並等待加載，然後完成後，我將顯示我的HTML頁面。

我讀過關於jQuery.load（）但聲音對我來說就像它只是加載一個單獨的html文件而不關心外部資產。

來源

2015-10-05 George Carlin

你可以寫一個加載器的JavaScript加載其他腳本，圖像和樣式表。其中每個都有一個「負載」事件，您可以在其中進行回調。 – Abhinav

我知道。但問題是我應該如何編寫加載器JavaScript。 –

不需要重新發明輪子：http://thinkpixellab.com/pxloader/ – Federico

從Udacity：

var gCachedAssets = {}; 

function loadAssets(assetList, callbackFcn) { 
    // All the information we need to keep track of 
    // for this batch. 
    var loadBatch = { 
     count: 0, 
     total: assetList.length, 
     cb: callbackFcn 
    }; 

    for(var i = 0; i < assetList.length; i++) { 
     if(gCachedAssets[assetList[i]] === null) { 
      var assetType = getAssetTypeFromExtension(assetList[i]); 

      if(assetType === 0) { // Asset is an image 
       var img = new Image(); 
       img.onload = function() { 
        onLoadedCallback(img, loadBatch); 
       }; 
       img.src = assetList[i]; 
       gCachedAssets[assetList[i]] = img; 

      } else if(assetType === 1) { // Asset is Javascript 
       var fileref = document.createElement('script'); 
       fileref.setAttribute("type", "text/javascript"); 
       fileref.onload = function (e){ 
        onLoadedCallback(fileref,loadBatch); 
       }; 
       fileref.setAttribute("src", filename); 
       document.getElementsByTagName("head")[0].appendChild(fileref); 
       gCachedAssets[assetList[i]] = fileref; 
      } 

     } else { // Asset is already loaded 
      onLoadedCallback(gCachedAssets[assetList[i]], loadBatch); 
     } 
    } 
} 

function onLoadedCallback(asset, batch) { 
    // If the entire batch has been loaded, 
    // call the callback. 
    batch.count++; 
    if(batch.count == batch.total) { 
     batch.cb(asset); 
    } 
} 

function getAssetTypeFromExtension(fname) { 
    if(fname.indexOf('.jpg') != -1 || fname.indexOf('.jpeg') != -1 || fname.indexOf('.png') != -1 || fname.indexOf('.gif') != -1 || fname.indexOf('.wp') != -1) { 
     // It's an image! 
     return 0; 
    } 

    if(fname.indexOf('.js') != -1 || fname.indexOf('.json') != -1) { 
     // It's javascript! 
     return 1; 
    } 

    // Uh Oh 
    return -1; 
}

要使用它，提供了資產的文件名作爲字符串數組loadAssets。當所有資產都被加載時觸發callbackFcn，而每次加載單個資產時調用onLoadedCallback。

因爲，對於Javascript的安全性限制，您無法獲得要加載的字節數加載v/s字節數，您可以使用加載的資產數v/s加載的資產數batch對象（batch.count/batch.total）。

來源

2015-10-05 19:25:55 Federico

我在我的網站上使用了你的代碼。它正在脫機工作，因爲它是預期的，但不在線！如果你檢查我的網站並找出錯誤，你會讓我開心。它是topdesignstudio.ir - 我在loader.js中使用了你的代碼 –

如何使用js檢測html的加載數據

回答

相關問題