Laden und spielen Sie ein gif mit Javascript onclick Ereignis

Auf meiner Website habe ich drei Bilder 1.png, 2.png and 3.png. Wenn ich auf 1.png klicke, möchte ich das animierte gif 1a.gif geladen und in dem img-Tag unter <div id="container"> angezeigt/aktualisiert werden. Wenn ich auf 2.png klicken, sollte 2a.gif (während 1a.gif verschwindet) angezeigt werden, und so weiter ... Das ist mein Code:Laden und spielen Sie ein gif mit Javascript onclick Ereignis

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

Es funktioniert, aber unzuverlässig (getestet mit Firefox und Chrome)! Wenn ich die HTML-Seite aktualisiere und auf 1.png, dann auf 2.png klicke, wird an einem Punkt plötzlich nur der erste Frame des animierten Gifs angezeigt. Ich muss noch einmal auf das gleiche Bild klicken (1,2 oder 3.png), um das gif laufen zu lassen. Warum? Ich bin auf der Suche nach einer leichten JavaScript-Lösung ohne jquery. Ich frage mich nur, warum das gif nicht richtig abgespielt wird, wenn ich auf das Bild klicke.

Als eine Randnotiz: Es wäre schön, ein Ladebild zu zeigen, während das gif (5 MB) geladen wird. Ich nicht, dass die Verwendung von CSS achive:

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

In diesem Fall wird das Laden Bild überhaupt nicht angezeigt. Wahrscheinlich, weil ich direkt von einem (z. B. 1a.gif) zu einem anderen aktualisiere (z. B. 2a.gif).

Zeige es direkt vor dem gif Laden nicht so gut geholfen hat:

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

Quelle

2016-10-18 Chris

Es gibt viele Möglichkeiten, um diese Art von Sache zu implementieren, aber um in Einklang zu bleiben, wie Sie es tun, wollen Sie in die onload Ereignis der img Haken.

Beachten Sie, dass ich in diesem Snippet keinen Zugriff auf Ihre GIFs habe. Daher verwende ich den Dienst "dummyimage.com", der ziemlich schnell ist, so dass Sie das "Laden" nicht sehr lange sehen.

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>

Quelle

2016-10-18 15:21:45

Diese bacause zweite img passiert ist noch nicht geladen! Ich schlage vor, dass Sie die 2 img in 2 verschiedenen divs und die Verwendung von Javascript, um die gesamte div verstecken/zeigen!

Quelle

2016-10-18 14:46:49 user3187960

die Gifs sind so groß. Ich wollte sie nur laden, wenn x.png angeklickt wird, um Ladezeiten und Verkehr zu minimieren. – Chris

Laden und spielen Sie ein gif mit Javascript onclick Ereignis

Antwort

Verwandte Themen