Comment fonctionne la mise en cache de l'image Web et pourquoi ce site Web ne fonctionne-t-il correctement que hors ligne?

Question

Ceci est mon premier message, alors s'il vous plaît ne vous fâchez pas si j'ai fait quelque chose de mal. C'est le site web le plus complexe que j'ai jamais fait. Quand je l'héberger sur mon propre serveur apache en utilisant ngrok, il fait la même chose ...

Donc, c'est le site hébergé:

https://zanemechem.000webhostapp.com/

en ligne:

https://drive.google.com/file/d/0BxbmcM0U2BHcRVBVZzlwMml2QmM/view?usp=sharing

Fondamentalement, il est conçu de telle sorte que lorsque vous chargez le site Web, les images sont mises dans le cache de votre navigateur, puis lorsque vous faites défiler vers le bas, ce mouvement est traduit en changeant les gifs qui sont e arrière-plan, puis en plaçant un espace réservé png sur eux.

hors ligne, le site fonctionne parfaitement, mais hébergé, les animations se chargent correctement, mais après avoir joué avec, elles se cassent et s'arrêtent de charger.

J'ai joué un peu avec la fonction setTimeout, pour m'assurer que le png ne se charge pas trop vite, mais cela ne semble pas fonctionner.

Les fichiers sont également très petits pour les gifs, donc la taille du fichier ne peut pas être la racine du problème. Je crois qu'il a à voir avec cette partie de la js:

function createImage(image,gif,previous){ 
    $("firstgif").css({backgroundImage:"none"}); 
    var img = document.createElement('img'); 
    img.src = image; 
    $("#loader").show(); 
    $("#loader").css({backgroundImage: "url("+previous+")"}); 
    console.log(previous); 
    $(img).on("load", function(){ 

    setTimeout(function(){$("#loader").hide(); 
    $(gif).css({backgroundImage: "url("+img.src+'#' + Math.random()+")"})},250); 
}); 

je me sens comme il y a quelque chose d'important que je suis absent, mais ne pas les connaissances nécessaires pour le trouver. Si quelqu'un ici possède cette connaissance, l'aide serait très appréciée!

Answer 1

Si vous avez besoin de contrôler la lecture gif (les gifs ont seulement la possibilité de jouer une fois, de boucler pour un nombre défini de lectures ou de boucler indéfiniment), vous aurez besoin d'une bibliothèque externe. Il va analyser les images et vous fournir des méthodes pour contrôler la lecture.

Il y a beaucoup d'options pour ceci, mais en voici une que j'ai utilisée. Ça marche. https://github.com/buzzfeed/libgif-js