0

preload 関数を直接呼び出すと、問題なく動作します。しかし、preload() が onClick で呼び出されると、画像の読み込み後でも処理が終了せず、ブラウザで「読み込み中...」と表示されます。

function preload(images) {
    if (document.images) {
        var i = 0;
        var imageArray = new Array();
        imageArray = images.split(',');
        var imageObj = new Image();
        for(i=0; i<=imageArray.length-1; i++) {
            document.write('<img src="' + imageArray[i] + '" width="335px" height="180px" alt="[Alternative text]" />');
            imageObj.src=imageArray[i];
        }
     }
}

<a href="javascript:onclick=preload('1.jpg,2.jpg');">Gallery</a>
4

1 に答える 1

1

document.writeページが読み込まれた後に呼び出すことはできません。ページに何かを追加したい場合は、document.createElement (see example)のような DOM 操作関数を呼び出す必要があります。

ただし、関数で行うことは、プリロードではなく、ページへの画像の直接挿入のように見えます。

画像をプリロードする場合、つまり、ブラウザに画像をキャッシュして後ですぐに利用できるようにする場合は、要素XmlHttpRequestを作成する代わりに使用することをお勧めします。Imageリクエストを発行XmlHttpRequestしても、ブラウザが砂時計表示になることはなく、ユーザーは何かが起こっているとは感じません。

先週末、これだけのために小さな「ライブラリ」を作成しました。リソースを簡単にプリロードします。

var preload = (function(){
    var queue = [], nbActives = 0;
    function bip(){
        if (queue.length==0 || nbActives>=4) return;
        nbActives++;
        var req = new XMLHttpRequest(), task=queue.shift();
        req.open("GET", task.src, true);
        req.onload = function () {
            nbActives--;
            bip();
            if (task.callback) task.callback(task.src);
        };
        req.send();
    }
    return function(src, priority, callback) {
        queue[priority?'unshift':'push']({src:src, callback:callback});
        bip();
    }
})();

使用法 ：

preload('path/to/file.png'); // preload the file

preload('path/to/file.png', true); // preload the file with high priority

preload('path/to/file.png', false, callback); // preload the file and be notified when it's finished

Github リポジトリ : https://github.com/Canop/preload

于 2013-02-04T16:44:13.977 に答える