使用预加载图像以外的东西 [英] Using Something Other Than Preload Image

查看：64
本文介绍了使用预加载图像以外的东西的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

首先，我是否应该使用预加载图像，还是应该使用其他方法来执行我想要的操作？我开始认为预加载图像与我要完成的事情无关。我想要做的是，我想要防止图像的转换效果，您看到的闪烁。

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

我试过这两个代码，但他们似乎没有为我工作。他们没有解决这个问题。

 < script> 
 var preloadImg = new Image（）; 
 preloadImg.src =https://i.imgur.com/ZjSHH2P.jpg; 
< / script> 
 
< img src =https://i.imgur.com/ZjSHH2P.jpgstyle =display：none;>

是否有其他代码可用于我正在尝试执行的操作？这是防止您看到的图像的视觉转换。所有帮助将不胜感激。



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



说明：



现在点击。




$ b


$ b

这就是我一直在测试它的方式。





据我所知图像加载到浏览器中，但是如果您提到的转换效果不起作用预计它必须是其他影响它的东西。



您可以在这里查看小提琴： https：/ /jsfiddle.net/a0gapvpj/7/

< pre class =snippet-code-html lang-html prettyprint-override脚本> var preloadImg = new Image（）; preloadImg.src =https://i.imgur.com/ZjSHH2P.jpg\";</script><br>指令：其中峰; br>从浏览器中清除最近的历史记录。< br>< br> < button id =playButton4style =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.querySelector（'＃playButton4 .pause'）。style.display ='none'; document.getElementById（'player4'）; document.querySelector（'＃playButton4 .initial'）。style.display ='none' .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.jp g''）'; 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 =playstyle =display：none;width =60height =72viewbox =0 0 16 14>< path d =M12.945.38l -.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732zfill =＃1ed760fill-rule =evenodd>< / path>< / svg><< ; svg class =pausestyle =display：none;width =60height =72viewbox =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.732zfill =＃1ed760fill-rule =evenodd>< / path>< / svg>< svg class =initialwidth =90height =108viewbox =0-10 85 120>< path fill =currentColorstyle =stroke：＃e77d19;笔划宽度：3px的;颜色：黑色; 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 =player4style =display：none;>< source src =''type ='audio / mpeg'>< / source>< / audio>


First, should I be using preload image, or should I be using something else for what I want to do? I'm beginning to think that preload image has nothing to do with what I'm tring to accomplish. What I want to do is, I want to prevent the changeover effect of an image, the flicker that you see.

I have a playbutton, there's no image on the initial screen, when you click on it, an image appears, that's the image that flickers when you first see it.

I tried these 2 codes but they don't seem to be working for me. They don't address the issue.

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

Is there some other code that will work for what I am trying to do? Which is prevent the visual changeover of an image that you see. All help would be greatly appreciated.

To reproduce the changeover effect, do this.

Instructions:

Clear recent history from browser.

Now click.

That's how I've been testing it.

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

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

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

解决方案

The image is always loaded in the browser for this:

However the problem with the JavaScript code that does the same thing is that you have new Image instead of new Image()

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

After the image should load in the browser window when this code is run. To make that sure you can take a look into the Chrome Developer tool to see what resources have been loaded in the web page (and its child frames)

As far as I know the image is loading into the browser, however if the changeover effect that you have mentioned isn't working as expected it has to be something else affecting it.

You can check the fiddle here: 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>

这篇关于使用预加载图像以外的东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆