Question

在这个代码结构中，是否有可能在DOM中专门预加载图像？这就是我想要做的。非常感谢所有帮助。

我希望代码专门针对代码的这一部分

padding

 onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');

Answer 1

你想加载什么？

这是您可以预加载的事项列表：

audio：音频文件。
document：用于嵌入或中的HTML文档。
embed：要嵌入元素内的资源。
fetch：由fetch或XHR请求访问的资源，例如ArrayBuffer或JSON文件。
font：字体文件。
image：图片文件。
object：要嵌入元素内的资源。
脚本：JavaScript文件。
style：样式表。
track：WebVTT文件。
worker：JavaScript Web worker或共享worker。
视频：视频文件。

利用rel="preload"标记属性来实现预加载。

在您的代码中，我无法找到“可预加载”的元素。

对于预加载图像，您有多种选择：

预加载CSS然后使用该CSS预加载图像，将图像设置为背景。

#idOftagTOContainImage { background: url(http://domain.tld/image-01.png) no-repeat}

纯JS预加载：

   function preload() {
        for (i = 0; i < preload.arguments.length; i++) {
            images[i] = new Image()
            images[i].src = preload.arguments[i]
        }
    }
    preload(
        "http://domain.tld/gallery/image-001.jpg",
        "http://domain.tld/gallery/image-002.jpg",
        "http://domain.tld/gallery/image-003.jpg"
    )

使用AJAX调用预加载：

window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.css');
        xhr.send('');
        // preload image
        new Image().src = "http://domain.tld/preload.png";
    }, 1000);
};

编辑：根据你的具体小提琴这是你想要的吗？ fiddle

由于您已经管理了样式，让我们利用它来预加载图像，只需指向正确的图像。如果需要，可以设置它的尺寸，但最好是第一个尺寸的图像（外观漂亮，尺寸小）。

style="display:block; width: 266px; height: 266px; cursor: pointer;background-color: black;background: url(\via.placeholder.com/266x266\) no-repeat;

编辑：只需设置您需要的任何背景（该位置）;

这是一个新的：fiddle

Answer 2

一种简单的方法是在页面加载时将它们加载到JS对象中

    <script>
       Image1 = new Image();
       Image1.src = "/imgfolder/imagename1.gif"

       Image2 = new Image();
       Image2.src = "/imgfolder/imagename2.gif";
    </script>

假设您要将它们设置为点击功能的背景图像.....

if (player.paused) {
   //....other code
   playButton2.style.backgroundImage = Image1.src
}
else
{
   //....other code
   playButton2.style.backgroundImage = Image2.src
}

在DOM中预加载图像

2 个答案: