Question

直接调用预加载功能可以正常工作。但是当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>

Answer 1

加载页面后，您无法呼叫document.write。如果要向页面添加内容，则必须调用DOM操作函数，如document.createElement (see example)。

但是你在函数中所做的事情看起来不像预加载，而是像在页面中直接插入图像一样。

如果您要预加载图片，即要求浏览器对其进行缓存以便以后立即可用，那么您最好使用XmlHttpRequest而不是创建Image元素。发出XmlHttpRequest请求并不会使浏览器显示沙漏，并且用户不会感觉到某些事情正在发生。

我做了一个小型的图书馆＆＃34;上周末就是这样：轻松预加载资源。

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

单击使用javascript单击预加载图像

1 个答案: