Question

我想预加载图像，但不一定要将它们附加到DOM。如果我预加载图像，是否可以有效地对其进行预缓存？

我的理解是，缓存是通过引用图像的src来工作的。从玩法来看，似乎预加载确实可以正常工作。但是，我不确定。这可能不可靠或会对性能产生负面影响。

我正在使用图片构造函数进行预加载。

const img = new Image();
img.src = imageArray[i].url;

Answer 1

是的，它确实有效。

function preloadImage(url){
    const img = new Image();
    img.src = imageArray[i].url;
}

但是，有两种方法。例如，将预加载延迟到页面加载之后：

function preloader() {
    if (document.images) {
        var img1 = new Image();
        var img2 = new Image();
        var img3 = new Image();

        img1.src = "http://url/image-001.jpg";
        img2.src = "http://url/image-002.jpg";
        img3.src = "http://url/image-003.jpg";
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);

将图片预加载到预缓存

1 个答案: