Question

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

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

检查preload脚本是否已经运行（元素在缓存中）

1 个答案: