使用预加载图像以外的东西
Posted
技术标签:
【中文标题】使用预加载图像以外的东西【英文标题】：Using Something Other Than Preload Image 【发布时间】：2018-03-25 04:31:24 【问题描述】：首先，我应该使用预加载图像，还是应该使用其他东西来完成我想做的事情？我开始认为预加载图像与我想要完成的事情无关。我想做的是，我想防止图像的转换效果，你看到的闪烁。
我有一个播放按钮，初始屏幕上没有图像，当你点击它时，会出现一个图像，这是你第一次看到它时闪烁的图像。
我尝试了这两个代码，但它们似乎对我不起作用。他们没有解决问题。
<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：
<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;" 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;" 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" 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 style="border: 3px solid #0059dd;" viewBox="0 0 260 260">
<rect x="0" y="0" 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" 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>【问题讨论】：
可能重复：***.com/questions/19396390/load-image-from-javascript - 不，不是.....两者之间没有关联。你能帮我解决这个问题吗？ 【参考方案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;" 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;" 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" 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>【讨论】：
有没有办法让过渡更顺畅？ 它仍然在做和以前一样的事情。它闪烁，远非平稳过渡。 使用 CSS 动画添加淡入淡出效果是最好的主意，但问题是 CSS 动画/过渡不适用于“背景图像”属性。检查这一点，除了背景图像之外，其他一切都顺利过渡 - jsfiddle.net/a0gapvpj/9 这很酷，但这似乎只影响 SVG，而不影响图像本身。 我想知道是否有任何图像过渡效果可以工作，或者可以工作。以上是关于使用预加载图像以外的东西的主要内容，如果未能解决你的问题，请参考以下文章