程序员经验分享-hwhale

使用预加载图像以外的其他内容

2024-04-19

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

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

我尝试了这两个代码，但它们似乎对我不起作用。他们不解决这个问题。

<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/ https://jsfiddle.net/a0gapvpj/8/

示例1：

<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>

示例2：

<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>

为此，图像始终加载到浏览器中：

然而，执行相同操作的 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/ 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

image

SVG

使用预加载图像以外的其他内容 的相关文章

随机推荐

热门标签