Ajouter spinner tandis que la nouvelle image est complètement chargé

Le rôle de ce script est de changer image.jpg avec newimage.gif et vice versa quand on clique dessus.

Maintenant, je veux ajouter un compteur tandis que le newimage.gif les charges.

Quelque chose comme sur 9gag.com/gif .

Quelqu'un peut-il m'aider s'il vous plaît?

Voici le code:
html

<img src="/image.jpg" id="pic" onclick="change()"/>
<a id="first" href="/newimage.gif" style="display:none;"></a>
<a id="second" href="/image.jpg" style="display:none;"></a>

javascript

function change(){
var imag = document.getElementById('pic').src;
var img = imag.slice(-3);
var img1 = document.getElementById('second').href;
var imag2 = document.getElementById('first').href;

if(img == 'gif') {
document.getElementById('pic').src=imag2;
//   here the newimage.gif changes to image.jpg 
} else {
//   here the image.jpg changes to newimage.gif
//   i think here should be the code that will display a spinner while the image.gif loads completely
document.getElementById('pic').src=img1;
}
}

InformationsquelleAutor Marian07 | 2014-01-21

9

La façon la plus simple pourrait être de fixer le CSS background-image de la propriété des images pour un chargement spinner graphique.

HTML:
```
<img src="path/to/real/image.jpg" class="loading">
```
CSS:
```
img.loading {
    background: transparent url(path/to/loading.gif) no-repeat scroll center center;
}
```
Une fois que l'image est téléchargée, elle couvre le "chargement" d'animation GIF image d'arrière-plan.

Si vous avez des images Gif ou Jpg enregistré avec l'affichage Progressif, vous aurez envie de réenregistrer ces images sans cette option si l'image réelle est invisible jusqu'à ce que la totalité de l'image est téléchargée, permettant à votre spinner graphique de montrer à travers dans le temps.
- Je veux quelque chose que l'enregistrement est quand image.gif est entièrement chargé, après l'image.jpg est cliqué, la fonction "modifier" qui commence.
- Hm. Votre pourrait basculer le "pic" de l'image de la src à un invisible GIF ou PNG, puis appliquer le CSS et classe à la balise IMG. Puis régler immédiatement la src pour la nouvelle image.
- Je suis l'aide de ce script dans une page où sont de nombreuses images gif. Si je voulais précharger toutes les images que je voudrais utiliser <img id="premier" href="/newimage.gif" style="display:none;"/> au lieu de <a id="premier" href="/newimage.gif" style="display:none;"></a>.
InformationsquelleAutor Greg Burghardt
0

Ont un coup d'oeil à ceci: http://www.appelsiini.net/projects/lazyload.
Des Images à l'extérieur de la fenêtre d'affichage ne sont pas chargés jusqu'à ce que l'utilisateur fait défiler pour eux, et vous avez la aboility d'avoir une petite image d'espace réservé jusqu'à ce qu'il est chargé...

En fait, j'ai utilisé ici, sur un site de test, il y a quelques temps: http://dev.thomaskile.me/?page=test-zone&module=Maçonnerie.

InformationsquelleAutor ThomasK

J'ai trouvé une sorte de moyen, le seul problème est que, après la image.gif est chargé de la toupie s'affiche toujours.

if(img == 'gif') {
document.getElementById('pic').src=imag2;
//   here the newimage.gif changes back to image.jpg 
document.getElementById("spinner").style.display = "none";    
} else {
document.getElementById('pic').src=img1;

var image = new Image();
image.src = document.getElementById('second').href;

var x = image.complete;
if(x) {
document.getElementById("spinner").style.display = "none"; 
} else {
document.getElementById("spinner").style.display = "block";
}
}
}

C'est ici j'ai utiliser le script http://www.2lol.ro/load/poze_haioase_miscatoare/20?ref=stk

InformationsquelleAutor Marian07

0

Avez-vous vérifié ce site pour un configurable spinner sans graphique supplémentaire qui peut être attaché à un élément du dom ? démarrage /arrêt de la toupie se résume à 2 js appels de fonction.

le code est sous licence mit, le minifiés js fichier autonome prend 9 ko, colle le code pour l'utiliser comme un plugin jquery est fourni et il y a un vml secours, euh... steampunk navigateurs ;-).

je ne suis pas affilié en aucune façon avec le code ou de l'auteur.

InformationsquelleAutor collapsar

Vous devez vous connecter pour publier un commentaire.