0

画像をプリロードしてその場で要素を作成するときに問題が発生します。スクリプトは、画像のURLのリストをロードし、キャンバス要素などを作成します。

問題は、その後の「ソフト」リフレッシュまたは同じURLの送信時に、プリロードループが開始されないため、キャンバス要素などが作成されないことです。これはリソースキャッシングと関係があると確信していますが、スクリプトが画像のURLリストを反復処理せず、期待どおりにDOMを構築しない理由はわかりません...例を次に示します。

ページ上のJavaScriptは最適化された出力ですが、プリロードループは次のようになります。

// Images array
var images = [];

for (var i = 0; i < l.length; ++i) {
    // Create canvas element
    var canvas = document.createElement('canvas');
    // Canvas element properties
    canvas.width = l[i].w;
    canvas.height = l[i].h;
    canvas.style.display = 'none';
    // Image element + mouse over event
    images[i] = document.getElementById('i' + i).getElementsByTagName('img')[0];
    images[i].addEventListener('mouseover', function() {
        handleCanvas(this);
    }, false);
    // Push canvas into DOM
    images[i].parentNode.insertBefore(canvas, images[i]);
    // Preload item from processed images list
    var image = new Image;
    image.src = l[i].i;
}

可能であれば、ヘッダーや「URL？random=37436464」タイプの修正に頼らないほうがいいです。Ubuntu12.10のChromeとFirefoxの夜間バージョンでテストされています。

4

1 に答える 1

0

さらに調査（IE9でテスト）した後、この問題はJavaScriptの非同期ロードと変数の開始の遅延が原因であると思われます。

于 2013-02-23T16:06:14.900 に答える