Jouer des séries d'images GIF animés sur le survol de la souris en utilisant Pure JavaScript

Question

J'ai une exigence où j'ai une étiquette <image> liée à une série d'images gif animés.

Je veux jouer ces animations (gif) sur l'état mouse over, l'une après l'autre (comme une playlist). Puis sur mouse Out Je veux revenir à une source img originale (comme une image d'affiche statique, en attente de l'utilisateur rollover état).

S'il vous plaît trouver un code pseudo-dessous que j'ai essayé:

function nextSlide() { 
    document.getElementsByTagName('img').setAttribute('src', slides[currentSlide]); 
    currentSlide = (currentSlide + 1) % slides.length; 
} 

document.getElementsByTagName('img').addEventListner('mouseover',function(){ 
    slides = gifImages; 
    var slideInterval = setInterval(nextSlide,1000); 
}); 
    document.getElementsByTagName('img').addEventListener('mouseout', function(){ 
     document.getElementsByTagName('img').src = originalImage; 
    }); 

défis (à fixer) d'utiliser code ci-dessus:

1. Je veux image gif à remplacer seulement après son l'animation est terminée, mais elle est remplacée après chaque retard de minuterie que j'utilise setInterval.

2. Sur mouse out, il ne revient pas à l'image d'origine.

3. La première image est également en cours de chargement après 1 seconde (puisque son taux est setInterval).

Veuillez me faire savoir s'il y a un moyen d'y parvenir.

Mise à jour:

• questions 2 et 3 est résolu. Maintenant, seul problème auquel je fais face est de jouer à la collection d'images gif.

Answer 1

Après beaucoup d'heures que j'ai eu réponse à ma propre question.
J'ai obtenu un extrait de code pour obtenir la durée de l'image GIF. Et une fois que j'ai la durée de l'image GIF, je peux définir l'intervalle après la durée des images GIF.

function getGIF(url) { 
    function downloadFile(url, success) { 
     let xhr = new XMLHttpRequest(); 
     xhr.open('GET', url, true); 
     xhr.responseType = 'arraybuffer'; 
     xhr.setRequestHeader('Cache-Control', 'no-cache'); 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState === 4) { 
       if (success) { 
        success(xhr.response); 
       } 
       const file = new Blob([xhr.response], {type:'image/jpeg'}); 
      } 
     }; 
     xhr.send(null); 
    } 

    downloadFile(url, function (data) { 
     let d = new Uint8Array(data); 

     let bin = null; 
     let duration = 0; 
     for (let i = 0; i < d.length; i++) { 
      bin += String.fromCharCode(d[i]); 

      // Find a Graphic Control Extension hex(21F904__ ____ __00) 
      if (d[i] === 0x21 && 
       d[i + 1] === 0xF9 && 
       d[i + 2] === 0x04 && 
       d[i + 7] === 0x00) { 
       // Swap 5th and 6th bytes to get the delay per frame 
       let delay = (d[i + 5] << 8) | (d[i + 4] & 0xFF); 

       // Should be aware browsers have a minimum frame delay 
       // e.g. 6ms for IE, 2ms modern browsers (50fps) 
       duration += delay < 2 ? 10 : delay; 
      } 
     } 
    }); 
    return duration; 
} 

Merci à codepen d'où je suis la solution: LINK
RÉFÉRENCE:

1. http://justinsomnia.org/2006/10/gif-animation-duration-calculation/
2. http://www.w3.org/Graphics/GIF/spec-gif89a.txt

Answer 2

Pour charger la durée GIF, vous pouvez utiliser gify. Ensuite, au passage de la souris, vous changez l'image et définissez une fonction de délai qui change l'image avec la durée GIF actuelle.

(function() { 
    var slideUrls = [ 
     'https://media.giphy.com/media/9zXWAIcr6jycE/giphy.gif', 
     'https://media.giphy.com/media/3ohzdFhIALkXTBxPkQ/giphy.gif' 
    ]; 
    var originalUrl = 'http://via.placeholder.com/350x150'; 

    // Loads the duration information for each GIF 
    var gifDurations = {}; 
    function loadDurations(i) { 
     if (i >= slideUrls.length) return; 

     var blob = null; 
     var xhr = new XMLHttpRequest(); 
     xhr.open("GET", slideUrls[i]); 
     xhr.responseType = 'blob'; 

     xhr.onload = function() { 
      blob = xhr.response; 
      var reader = new FileReader(); 

      reader.onload = function (event) { 
       var gifInfo = gify.getInfo(reader.result); 
       gifDurations[slideUrls[i]] = gifInfo.duration; 
       loadDurations(i + 1) 
      } 

      reader.readAsArrayBuffer(blob); 
     } 
     xhr.send(); 
    } 
    loadDurations(0); 

    var element = document.getElementById('id'); 
    var timeout; 
    var currentSlide = 0; 

    function nextSlide() { 
     var url = slideUrls[currentSlide]; 
     var duration = gifDurations[url]; 
     element.setAttribute('src', slideUrls[currentSlide]); 
     currentSlide = (currentSlide + 1) % slideUrls.length; 

     timeout = setTimeout(function() { 
      nextSlide(); 
     }, duration); 
    } 

    element.addEventListener('mouseover', function() { 
     nextSlide(); 
    }); 

    element.addEventListener('mouseout', function() { 
     clearTimeout(timeout); 
     element.src = originalUrl; 
    }); 

})(); 

Answer 3

En utilisant jQuery .hover() avec une image statique et un .gif - JSFiddle

avait une bonne lecture sur ce thread d'abord avant d'écrire cela.

$("#gifdiv").hover(
 
\t \t function() { 
 
    \t \t $(this).find("img").attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif"); 
 
    }, function() { 
 
    \t $(this).find("img").attr("src", "https://lh4.googleusercontent.com/__LWblq_sBitgvSmldccaKsEqt0ADBGpPmYFsl3l0Jkxenqti4Jt05EN9EUJPDlHrM5DprN2-hrX3MM=w1680-h944"); 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gifdiv"> 
 
    <img src="https://lh4.googleusercontent.com/__LWblq_sBitgvSmldccaKsEqt0ADBGpPmYFsl3l0Jkxenqti4Jt05EN9EUJPDlHrM5DprN2-hrX3MM=w1680-h944" class="static" /> 
 
</div>