2
まず、プレロードイメージを使用する必要がありますか、または私がやりたいことに何か他のものを使用すべきですか？プリロードイメージは私が達成しようとしているものとは何の関係もないと思っています。私がしたいのは、画像の切り替え効果、あなたが見るちらつきを防ぐことです。プレロードイメージ以外のものを使用
私は再生ボタンを持っています。最初の画面に画像がありません。クリックすると、画像が表示されます。最初に見たときにちらつく画像です。
私はこれらの2つのコードを試しましたが、私のために働いていないようです。彼らは問題に取り組まない。
<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;" 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>
を可能重複：https://stackoverflow.com/questions/19396390/load-image-from-javascript - –
ありません、それはですそうではありません。両者には相関はありません。あなたはこれで私を助けることができますか？ –