检查preLOAD脚本已经运行（元素在高速缓存中） [英] Check if preload script has already run (elements are in cache)

问题描述

我有这个jQuery的AJAX功能与呼叫负载在HTML .js文件每一页上

我想提出一个if语句来检查，如果我想preLOAD文件已经在缓存中。这避免该脚本将运行在每一页上的所有内容。 当一切都在高速缓存中，我们不需要这样。而费时跑了！

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!

注：我想它的每一页上的，因为我想要的preLOAD在以往的客户端的土地到网站。 （不仅仅是主页）

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)

下面是preload.js：

Here is the preload.js:

(function() {

这里插入if语句，应该是这样的：

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

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

或（概念），如果myslide.swf在缓存中，然后什么也不做;否则...

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);
};

})();   

所有的脚本作品完美，我唯一怀念的是if语句。

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

感谢您的帮助。

推荐答案

使用<一个href="http://stackoverflow.com/questions/2446740/post-loading-check-if-an-image-is-in-the-browser-cache">this问题为出发点，我想出了：

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.

编辑：这是唯一的其他东西我能想到的。您可以检查多久Ajax请求的SWF需要，像这样：

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();
        }
    }
}

根据您的图像的大小，它应该相当少的时间，图像才能从缓存中加载如果你可以微调（例如16.6 kb的形象只是采取1.2秒到250ms的在我的测试去），它这个SWF，在成功处理程序计算出的定时器的值应该告诉你，如果它被从缓存加载。然后，你可以用的有条件的东西，其余的功能，并根据计时器是否超过一定值调用它。

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.

这篇关于检查preLOAD脚本已经运行（元素在高速缓存中）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！