javascript - 检查预加载脚本是否已经运行(元素在缓存中)

Question

我有这个 jQuery AJAX 函数，它通过调用 .JS 在 html 的每个页面上加载

我想放置一个 if 语句来检查我要预加载的文件是否已经在缓存中。这是为了避免脚本在每个页面上运行其所有内容。 一旦一切都在缓存中，我们就不需要它了。而且运行它很耗时!

注意:我希望它出现在每个页面上，因为我希望在客户登陆网站的任何地方进行预加载。 (不仅是主页)

这是 preload.js:

(function() {

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

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

或(概念)如果 myslide.swf 在缓存中则什么也不做；否则……

}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 语句。

感谢您的帮助。

Answer 1

使用 this question作为起点，我想到了:

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

让我知道这是怎么回事。

编辑:这是我唯一能想到的其他事情。您可以检查 swf 的 ajax 请求需要多长时间，如下所示:

$.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 秒到 250 毫秒)如果你可以微调它对于此 swf，在成功处理程序中计算的计时器值应该会告诉您它是否正在从缓存中加载。然后，您可以将其余的条件内容包装在一个函数中，并根据计时器是否高于某个值来调用它。