如何使用js检测html的加载数据

Question

我的想法是为我的网站创建预加载器 html。在 Flash 中，当我需要检测加载的数据并将其与总数据进行比较以创建加载条时，我使用了以下 AS3 代码：

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

现在我正在 js 中寻找类似的东西。但这次我需要找到我所有外部资产的大小并将其与加载量进行比较并等待它加载，然后当它完成时，我将显示我的 html 页面。

我读过一些关于 jQuery.load() 的内容，但对我来说听起来就像它只是加载一个 html 文件而不关心外部资产。

Answer 1

来自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) 给定的要加载的资产数量。

如何使用js检测html的加载数据

how to detect loaded data of html using js

html

javascript

jquery

preloader