serving the solutions day and night

Pages

Tuesday, June 3, 2014

Asset Managment Concept for HTML5

If you load a same file multiple times. Each load will hit disk/web, and load into memory.
This can become a large performance burden as each from disk retrieve can have performance costs.
So, we need fast and flexibility to help us get larger amounts of data into memory. If a file had been loaded in memory already, so that we can return the in memory version,instead of going back to hitting the disk/web/multiple times.It is called an asset loading manager concept.

File I/O functions in JavaScript are by definition asynchronous.

Assest Managment Need
1)Cached assest management
2)Async Callbacks on load
3)Batched assest Loading


Image load code used to be
var img = new Image();
img.onLoad = function(){...}
img.src = "dns.png"

Single file load in memory
var memoryAsset = {};

function loadAsset(fileName, callbackFunction) {
    if(memoryAsset[fileName]==null) {
        //file is not loaded in memory
        var img = new Image();
        img.onload = function () {
            callbackFunction(img);
        };
        img.src = fileName;

        //adding a new dictionary entry in memoryAssets
        memoryAsset[fileName]= img;
    } else {
        //file is already loaded in memory, then call the function.
        callbackFunction(memoryAsset[fileName]);
    }
}

loadAsset("dns.png",function(){window.alert('File loaded!');});

Muliple file loads in memory
var memoryAssets = {};

function loadAssets(fileList, callbackFunction) {
alert(fileList.length);
    var loadFiles = {
        count :0,
        totalcount : fileList.length,
        cbf:callbackFunction
    };

    for (var i=0;i<=fileList.length;i++) {
        var fileName = fileList[i];
        var assettype = getFileType(fileName);

        if(memoryAssets[fileName] == null) {
            if(assettype == 0) {
                var img = new Image();
                img.onload = function () {
                   onLoadedCallBack(img, loadFiles);
                };
                img.src = fileName;
                memoryAssets[fileName] = img;
            } else if(assettype == 1) {
                var  js = document.createElement('script');
                js.setAttribute("type", "text/javascript");
                js.addEventListener('load', function (e){
                    onLoadedCallBack(js, loadFiles);
                }, false);
                js.setAttribute("src", fileName);
                document.getElementsByTagName("head")[0].appendChild(js);
                memoryAssets[fileName] = js;
            }
        } else {
            onLoadedCallBack(memoryAssets[fileName], loadFiles);
        }
    }
}

function getFileType(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;
}

function onLoadedCallBack(fname, file) {
    file.count++;
    alert(fname + " - " +  file.count + " - " + file.totalcount);
    if(file.count == file.totalcount) {
        file.cbf(fname);
    }
}

var inputScripts = [
    "dns.js"
    "core.js",
    "game.js",
    "input.js",
    "json.js",
    "jquery.js"
];

loadAssets(inputScripts,function(){window.alert('Files loaded!');});


1 comment:

Anonymous said...

Thanks in favor of sharing such a nice opinion, piece of writing is nice,
thats why i have read it completely

Look into my website ... business marketing