我有这个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语句。
谢谢您的帮助。
最佳答案
以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进行微调,成功处理程序中计算出的计时器值应告诉您是否正在从缓存中加载它。然后,您可以将其他条件填充到函数中,并根据timer是否高于某个值来调用它。