2

HTMLのすべてのページで.JSへの呼び出しでロードするこのjQuery AJAX関数があります

プリロードするファイルが既にキャッシュにあるかどうかを確認する if ステートメントを配置したいと思います。これにより、スクリプトがすべてのページですべてのコンテンツを実行することを回避できます。すべてがキャッシュされたら、それは必要ありません。そして、それを実行するのに時間がかかります！

注: クライアントが Web サイトに到達するたびにプリロードが必要なため、すべてのページにそれが必要です。（メインページだけではありません）

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 ミリ秒に短縮されました)。 、成功ハンドラーで計算されたタイマー値は、キャッシュからロードされているかどうかを示します。次に、残りの条件付きのものを関数にラップし、タイマーが特定の値を超えているかどうかに基づいて呼び出すことができます。

于 2012-10-12T16:03:08.140 に答える