javascript - 在DOM中预加载图像

在这种代码结构内，是否有任何可能的方式专门在DOM中预加载图像？这就是我想要做的。所有帮助将不胜感激。

https://jsfiddle.net/mjnaaLk5/8/

我想让代码专门进入这部分代码

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

 onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'https://via.placeholder.com/266x266\')';
playButton2.style.padding = '94px 100px 94px 100px';
playButton2.style.cursor = 'pointer';
playButton2.style.border='3px solid #e77d19';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'https://via.placeholder.com/266x266\')';
playButton2.style.border='3px solid #e77d19';
playButton2.style.padding = '94px 100px 94px 100px';
playButton2.style.cursor = 'pointer';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">

最佳答案

您想预加载什么？

这是您可以预加载的东西的列表：


音频：音频文件。
document：旨在嵌入或中的HTML文档。
embed：要嵌入到元素内部的资源。
fetch：由fetch或XHR请求访问的资源，例如ArrayBuffer或JSON文件。
字体：字体文件。
图像：图像文件。
对象：要嵌入元素内的资源。
脚本：JavaScript文件。
样式：样式表。
跟踪：WebVTT文件。
worker：JavaScript网络工作人员或共享工作人员。
视频：视频文件。


利用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;

编辑：只需设置您需要url（thatlocation）的任何背景；

这是新的：fiddle