Check if preload script has already run (elements

Question

I have this jQuery AJAX function that load with the call to .JS on every page in the html

I would like to put an if statement that checks if the files that I want to preload are already in cache. This to avoid that the script will run all its content on every page. Once everything is in cache we don't need that. And is time consuming to run it!

Note: I want it on every page because I want that preload where ever the client land to the web site. (not only main page)

Here is the preload.js:

(function() {

here to insert the if statement, should be something like:

if(xhr[src="myslide.swf"].status = 200);
alert('cached');

or (concept) if myslide.swf is in cache then do nothing; else...

}else{
setTimeout(function(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'myslide.js');
xhr.send('');   
var xhr = new XMLHttpRequest();
xhr.open('GET', 'myslide.swf');
xhr.send('');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'images.xml');
xhr.send('');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'param.xml');
xhr.send('');
$.ajax({ 
type: "POST", 
url: "/javascript/getnames.php", 
data: "$list",
cache: true,
dataType:"json",
success: function(result) {
    Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
    if (obj.hasOwnProperty(key)) size++;
      }
     return size;
    };
    // Get the size of an object
    var size = Object.size(result);
    var i = 0;
    for(i=0; i<size; i++) new Image().src = "/site/" + result[i];
                /*alert(result[X]);*/
            }
     });  //closes the ajax call
var splashArray = new Array();
// Load the Splash XML file and assign each image within to an array
$.get('/javascript/preloadGallery.xml', function(xml) {
    $('image', xml).each(function (i) {
            splashArray.push($(this).attr("src"));
    });
    work_with_splash();
});
function work_with_splash () {
    Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
    if (obj.hasOwnProperty(key)) size++;
      }
     return size;
    };
    // Get the size of an object
    var size = Object.size(splashArray);
    var i = 0;
    for(i=0; i<size; i++) new Image().src = splashArray[i];
                /*alert(result[X]);*/   
} //closes the spalsh Call
}, 500);
};

})();   

All the script works perfectly, the only thing I miss is the if statement.

Thanks for the help.

Answer 1

Using this question as a starting point, I came up with:

var storage = window.localStorage;
if (!storage.cachedElements) {
    storage.cachedElements = "";
}

function logCache(source) {
    if (storage.cachedElements.indexOf(source, 0) < 0) {
        if (storage.cachedElements != "") 
            storage.cachedElements += ";";
        storage.cachedElements += source;
    }
}

function cached(source) {
    return (storage.cachedElements.indexOf(source, 0) >= 0);
}

if (cached("swf")){
}else{
...
xhr.open('GET', 'myslide.js');
xhr.send('');
$.ajax({
    type: "GET", 
    url: "/myslide.swf",
    success: function(result) {
        logCache("swf");
    }
}
...

Let me know how this works out.

EDIT: Here is the only other thing I can think of. You can check how long the ajax request for the swf takes, like so:

$.ajax({
    type: "GET", 
    url: "/myslide.swf",
    beforeSend: function(){ 
        window.timer = new Date().getTime(); 
    },
    success: function(result) {
        window.timer = (new Date().getTime()) - window.timer;
        if (window.timer > 200) {
            functioncall();
        }
    }
}

Depending on the size of your images, it should take considerably less time for the image to load from a cache (a 16.6 kb image for example just went from taking 1.2s to 250ms on my test) If you can fine tune it for this swf, the timer value calculated in the success handler should tell you if it is being loaded from the cache. You can then wrap the rest of the conditional stuff in a function, and call it based on whether timer is above a certain value.