javascript - 在 DOM 中预加载图像

Question

是否有任何这样的方法可以专门在 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();
}">

Answer 1

您想要预加载什么？

这是您可以预加载的内容的列表:

• 音频:音频文件。
• 文档:旨在嵌入 或 内的 HTML 文档。
• 嵌入:要嵌入到元素内的资源。
• fetch:通过 fetch 或 XHR 请求访问的资源，例如 ArrayBuffer 或 JSON 文件。
• 字体:字体文件。
• 图像:图像文件。
• 对象:要嵌入元素内的资源。
• 脚本:JavaScript 文件。
• 样式:样式表。
• 跟踪: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 ，这就是您想要的吗？ fiddle

既然您已经管理了样式，那么让我们利用它来预加载图像，只需指向正确的图像即可。如果需要，请设置其尺寸，但最好将图像尺寸放在第一位(为了好看和小尺寸)。

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

编辑:只需设置 url(thatlocation) 所需的任何背景即可；

这是一个新的:fiddle