2

我有这个 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 语句。

谢谢您的帮助。

4

1 回答 1

0

以这个问题为出发点，我想出了：

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

于 2012-10-12T16:03:08.140 回答