如何强制浏览器预加载带有显示的图像：none？

Question

Firefox 不会加载带有 display: none 的图像，直到它们被要求显示给用户。 Chromium 会暂停，直到图像加载完毕，然后再显示它。

对于较小的文件，如果图像尚未在 Firefox 上加载，则会出现短暂的闪烁。对于较大的文件，延迟会更长，这也会使 Chromium 的停顿变得明显。

我想要显示的图像：none 预加载，这样显示它们时就没有延迟。

我曾尝试使用 Javascript 声明一个新的 Image 对象，但这 不适用于 Firefox 或 Chromium .

在此示例中，您可以使用左右箭头键在图像之间循环。

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}   

.imgs {
    width:50%;
    height: 50%;
}
</style>
</head>
<body>

<img src="https://picsum.photos/200/100" style="display: block;" class="imgs">
<img src="https://picsum.photos/200/200" style="display: none;" class="imgs">

<script>
imgs = document.getElementsByClassName("imgs");

// THIS DOES NOT WORK
//~ function preloadImage(url)
//~ {
    //~ var img = new Image();
    //~ img.src = url;
//~ }

//preloadImage("myImg.jpg"); THIS DOES NOT WORK

document.onkeydown = checkKey; // directional keys

function checkKey(e) {

    if (document.activeElement.tagName != "INPUT") {

        e = e || window.event;

        switch (e.keyCode) {

            case 38:
                // up arrow
                break;

            case 40:
                // down arrow
                break;

            case 37:
                // left arrow
                imgs[0].style.display = "block";
                imgs[1].style.display = "none";
                break;

            case 39:
                // right arrow
                imgs[0].style.display = "none";
                imgs[1].style.display = "block";
                break;
        }
    }
}

</script>
</body>
</html>

Answer 1

我已经找到了解决这个问题的方法。

我使用一个名为“imgBuffer”的 class 来保存需要立即显示的图像。此 class 的图像将包含需要随时显示的图像源，但不会显示图像本身。

棘手的部分是确保隐藏图像位于屏幕上不会以任何方式影响布局的位置。

注意隐藏缓冲图像的宽度和高度与显示图像的宽度和高度相匹配。如果您调整隐藏图像的尺寸，页面可能会有不同的行为，例如在不需要时添加滚动条。

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}   

.imgs {
    width:50%;
    height: 50%;
}

.imgBuffer {
    position: absolute;
    height: 50%;
    width: 50%;
    visibility: hidden;
    z-index: -1;
}
</style>
</head>
<body>

<img src="https://picsum.photos/200/100" style="display: block;" class="imgs">
<img src="https://picsum.photos/200/200" style="display: none;" class="imgs">

<img src="https://picsum.photos/200/100" class="imgBuffer">
<img src="https://picsum.photos/200/200" class="imgBuffer">

<script>
imgs = document.getElementsByClassName("imgs");

// THIS DOES NOT WORK
//~ function preloadImage(url)
//~ {
    //~ var img = new Image();
    //~ img.src = url;
//~ }

//preloadImage("myImg.jpg"); THIS DOES NOT WORK

document.onkeydown = checkKey; // directional keys

function checkKey(e) {

    if (document.activeElement.tagName != "INPUT") {

        e = e || window.event;

        switch (e.keyCode) {

            case 38:
                // up arrow
                break;

            case 40:
                // down arrow
                break;

            case 37:
                // left arrow
                imgs[0].style.display = "block";
                imgs[1].style.display = "none";
                break;

            case 39:
                // right arrow
                imgs[0].style.display = "none";
                imgs[1].style.display = "block";
                break;
        }
    }
}

</script>
</body>
</html>

如何强制浏览器预加载带有显示的图像：none？

How to force browsers to preload image with display: none?

html

browser

image

preload