在DOM中预加载图像

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

我想要的代码去专门

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(); 
}">

来源

2017-10-10 svgcoding

你想用预先加载的图像做什么？仅供参考：如果您将所有javascript移至某个函数并从onclick中调用该函数，您可能会发现自己的代码更易于使用。并且，将重复的风格工作转移到css类（s）。 –

什么都没有，我只是希望他们被预先加载，这样他们不会闪烁导致改变效果。 https://jsfiddle.net/mjnaaLk5/8/ – svgcoding

你想什么来预加载代码的这部分里面？

这是事情的清单，你可以预载：

音频：音频文件。
document：一个打算嵌入在or中的HTML文档。
嵌入：要嵌入元素中的资源。
fetch：要通过提取或XHR请求访问的资源，例如ArrayBuffer或JSON文件。
font：字体文件。
image：图像文件。
object：要嵌入元素中的资源。
脚本：JavaScript文件。
风格：样式表。
track：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

来源

2017-10-10 11:50:44 DanteTheSmith

看看最后一个小提琴吗？是吗？ – DanteTheSmith

上面的这个答案根本没有帮助我。 – svgcoding

一个简单的方法是将其加载到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 
}

来源

2017-10-10 20:10:15

在DOM中预加载图像

回答

相关问题