javascript onclickイベントでGIFを読み込んで再生する

私のウェブサイトには、3つの画像1.png, 2.png and 3.pngがあります。 1.pngをクリックすると、<div id="container">にあるimgタグにアニメーションgif 1a.gifがロードされ、表示/更新されます。 2.pngにIをクリックすると、2a.gifは（1a.gif消滅ながら）が表示されなければならないというように...これは私のコードです：javascript onclickイベントでGIFを読み込んで再生する

<html> 
<body> 
<div> 
<img src="1.png" onclick="document.getElementById('img').src = '1a.gif'" /> 
<img src="2.png" onclick="document.getElementById('img').src = '2a.gif'" /> 
<img src="3.png" onclick="document.getElementById('img').src = '3a.gif'" /> 
</div> 

<div id="container"> 
<img id="img" src="1a.gif" /> 
</div> 

</html> 
</body>

それは、（FirefoxやChromeでテストした）、しかし信頼できない取り組んでいます！私がhtmlページをリフレッシュして1.pngをクリックすると、2.pngよりも...ある時点で、アニメーションGIFの最初のフレームのみが表示されます。 gifを実行するには、同じ画像（1,2または3.png）をもう一度クリックする必要があります。どうして？私はjqueryなしで軽量のjavascriptソリューションを探しています。私は画像をクリックするとgifが正しく再生されない理由を自分に尋ねています。

gif（5 MB）がロードされている間に読み込みイメージを表示するといいでしょう。私はそれを達成するために失敗しました：

#container {background:url('loading.png') no-repeat; }

この場合、読み込みイメージはまったく表示されません。おそらく、1つ（たとえば1a.gif）から別のもの（2a.gifなど）に直接更新しているためです。

右にも助けなかったGIFをロードする前にそれを表示：これが第二のimg bacause起こる

<img src="1.png" onclick="document.getElementById('img').src = 'loading.png'; 
document.getElementById('img').src = '1a.gif'" />

出典

2016-10-18 Chris

このような方法を実装するにはさまざまな方法がありますが、どのように行おうとしているのであれば、imgのonloadイベントにフックする必要があります。

このスニペットでは私はあなたのGIFにアクセスすることができませんので、私は非常に高速なdummyimage.comサービスを使用していますので、非常に長い時間 "読み込み"が表示されません。

window.onload = function() { 
 
    var img = document.getElementById('img'); 
 
    var container = document.getElementById('container'); 
 
    var showImage = function showImage() { 
 
    img.style.display = "inline"; 
 
    container.style.backgroundImage = ""; 
 
    }; 
 
    img.addEventListener('load', showImage); 
 
    img.addEventListener('error', showImage); 
 
    var thumbs = document.getElementsByClassName('thumb'); 
 
    for (var i = 0, z = thumbs.length; i < z; i++) { 
 
    var thumb = thumbs[i]; 
 
    var handler = (function(t) { 
 
     return function clickThumb() { 
 
     container.style.backgroundImage = "url('https://dummyimage.com/500x500/000/fff.gif&text=loading')"; 
 
     img.style.display = "none"; 
 
     img.src = t.dataset['image']; 
 
     }; 
 
    })(thumb); 
 
    thumb.addEventListener('click', handler); 
 
    } 
 
};

<div> 
 
    <img src="1.png" class="thumb" data-image="https://dummyimage.com/500x200/000/fff.gif" /> 
 
    <img src="2.png" class="thumb" data-image="https://dummyimage.com/200x200/000/fff.gif" /> 
 
    <img src="3.png" class="thumb" data-image="https://dummyimage.com/500x500/000/fff.gif" /> 
 
</div> 
 

 
<div id="container"> 
 
    <img id="img" class="main" /> 
 
</div>

出典

2016-10-18 15:21:45

がまだロードされていません！ 2つの異なるdivに2つのimgを入れ、javascriptを使用してdiv全体を表示/非表示にすることをお勧めします。

出典

2016-10-18 14:46:49 user3187960

のgifのはとても大きいです。ロード時間とトラフィックを最小限に抑えるためにx.pngをクリックしたときにのみロードしたかったのです。 – Chris

javascript onclickイベントでGIFを読み込んで再生する

答えて

関連する問題