0

直接调用 preload 函数没有任何问题。但是当在点击时调用 preload() 时，即使在加载图像之后，也不会结束其处理，这可以在浏览器中被视为“正在加载...”

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 这样的 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 回答