使用除预载图像之外的东西

Question

首先，我应该使用预装图像，还是应该使用其他东西来做我想做的事情？我开始认为预载图像与我要完成的任务无关。我想要做的是，我想防止图像的转换效果，你看到的闪烁。

我有一个播放按钮，初始屏幕上没有图像，当您点击它时，会出现一个图像，这是您第一次看到它时闪烁的图像。

我尝试了这两个代码，但它们似乎并不适合我。他们没有解决这个问题。

<script>
  var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/ZjSHH2P.jpg";
</script>

<img src="https://i.imgur.com/ZjSHH2P.jpg " style="display: none;">

是否有一些其他代码可以用于我想要做的事情？这会阻止您看到的图像的视觉转换。非常感谢所有帮助。

要重现转换效果，请执行此操作。

说明：

从浏览器中清除最近的历史记录。

现在点击。

我是如何测试它的。

https://jsfiddle.net/a0gapvpj/8/

示例1：

＆＃13;

＆＃13;

<br>To reproduce the changeover effect, do this.
<br>
<br>Instructions:
<br>Clear recent history from browser.
<br>Now click.
<br>

<script>
  var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/ZjSHH2P.jpg";
</script>



<button id="playButton4" style="display:block; width: 266px; height: 266px; cursor: pointer;background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, #000000 177px ); border: 3px solid #0059dd;"
onclick=" 
    var button = document.getElementById('playButton4');
    var player = document.getElementById('player4');
      document.querySelector('#playButton4 .initial').style.display='none';
      document.querySelector('#playButton4 .pause').style.display='none';
      document.querySelector('#playButton4 .play').style.display='none';
    player.volume=1.0; if (player.paused) {
    playButton4.style.border='3px solid #e77d19';
    playButton4.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'https://i.imgur.com/ZjSHH2P.jpg\')';
    playButton4.style.backgroundRepeat = 'no-repeat';
    playButton4.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton4 .pause').style.display='inline-block';
    player.play();
    } else {
    playButton4.style.border='3px solid #e77d19';
    playButton4.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'https://i.imgur.com/ZjSHH2P.jpg\')';
    playButton4.style.backgroundRepeat = 'no-repeat';
    playButton4.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton4 .play').style.display='inline-block';
    player.pause();
    }">

  <svg class="play" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="pause" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

</button>

<audio id="player4" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>

＆＃13;

＆＃13;

＆＃13;

示例2：

＆＃13;

＆＃13;

<script>
  var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/A445IfJ.png";
    var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/A445IfJ.png";
</script>

<div id="svg-wrapper" style="position: relative;width: 266px;height: 266px;">
<svg width="260" height="260" style="border: 3px solid #0059dd;" viewBox="0 0 260 260">
  <rect x="0" y="0" width="260" height="260" fill="black" />

  <line x1="0" y1="0" x2="100%" y2="100%" 
style="stroke:#0059dd;stroke-width:3" />

  <line x1="0" y1="100%" x2="100%" y2="0"
style="stroke:#0059dd;stroke-width:3"/>
  
<rect x="105" y="105" width="50" height="50" fill="transparent" />
</svg>

<button id="playButton2" style="position: absolute;top: 134px;left: 134px;transform: translate(-50%, -50%);width:50px; height:50px; border:none; cursor: pointer; background-color:transparent; background-image: url('https://i.imgur.com/A445IfJ.png')" onclick=" 
var player = document.getElementById('player');
player.volume=1.0; 
var button = document.getElementById('playButton2');
if (player.paused) {
    playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/qg4rg7Z.png\')';
playButton2.style.backgroundColor = 'transparent';
    player.play();
  } else {
playButton2.style.backgroundColor = 'transparent';
    playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/A445IfJ.png\')';
    player.pause();
  }">
 </button>

<audio id="player" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

图像始终在浏览器中加载：

然而，执行相同操作的JavaScript代码的问题在于您拥有new Image而不是new Image()

<script>
  var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/ZjSHH2P.jpg";
</script>

运行此代码后，应在浏览器窗口中加载图像。为确保您可以查看Chrome开发者工具，以查看网页中已加载的资源（及其子框架）

据我所知，图片正在加载到浏览器中，但是如果你提到的转换效果没有按预期工作，那么它必须是影响它的其他因素。

您可以在此处查看小提琴：https://jsfiddle.net/a0gapvpj/7/

<script>
  var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/ZjSHH2P.jpg";
</script>

<br> Instructions:

<br> Clear recent history from browser.
<br>
<br> Now click.






<button id="playButton4" style="display:block; width: 266px; height: 266px; cursor: pointer;background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, #000000 177px ); border: 3px solid #0059dd;"
onclick=" 
    var button = document.getElementById('playButton4');
    var player = document.getElementById('player4');
      document.querySelector('#playButton4 .initial').style.display='none';
      document.querySelector('#playButton4 .pause').style.display='none';
      document.querySelector('#playButton4 .play').style.display='none';
    player.volume=1.0; if (player.paused) {
    playButton4.style.border='3px solid #e77d19';
    playButton4.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'https://i.imgur.com/ZjSHH2P.jpg\')';
    playButton4.style.backgroundRepeat = 'no-repeat';
    playButton4.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton4 .pause').style.display='inline-block';
    player.play();
    } else {
    playButton4.style.border='3px solid #e77d19';
    playButton4.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'https://i.imgur.com/ZjSHH2P.jpg\')';
    playButton4.style.backgroundRepeat = 'no-repeat';
    playButton4.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton4 .play').style.display='inline-block';
    player.pause();
    }">

  <svg class="play" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="pause" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

</button>

<audio id="player4" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>