jquery Chargement de l'image pendant le chargement des éléments

Question

Je suis à la recherche de tutoriels/articles sur l'insertion d'un GIF de chargement pendant que les éléments se chargent, je l'ai vu dans quelques sites. Je peux seulement sembler trouver des articles sur des images de préchargement.

Answer 1

Une stratégie générale consiste à placer l'image de chargement dans une balise div ou span, et de l'afficher ou de la masquer lorsque vous voulez l'afficher. Si vous voulez l'afficher initialement, placez simplement une fonction jQuery .hide() sur le div ou l'span dans la fonction jQuery on ready.

Voir la jQuery docs on show() and hide()

Answer 2

Selon ce que vous essayez de faire, ce n'est pas particulièrement difficile. Ce qui suit montrera une image de chargement (préexistante), puis chargera du html récupéré via ajax, puis à la fin, il cachera l'image de chargement.

$(function() { 
    $('#activate').click(function() { 
     $('#loadingImg').show(); 
     $('#whereItGoes').load('url-to-data-to-be-loaded', function() { 
      $('#loadingImg').hide(); 
     }); 
    }); 
}); 

Si les données à charger sont des images, il est un peu Tricker depuis le rappel de charge peut être appelée avant que les données d'image est effectivement téléchargé. Une stratégie dans ce cas est d'avoir un script inclus avec le code HTML qui sait combien d'images doivent être chargées et avoir un gestionnaire d'événements surchargé qui coïncide essentiellement le nombre d'images jusqu'à ce que toutes les images ont été téléchargées. Je le couple habituellement avec un timeout au cas où le gestionnaire onloaded ne serait pas ajouté avant que les données de l'image ne soient disponibles (dans ce cas, il ne se déclenchera pas).

Answer 3

Il est généralement rien de plus que:

function onAGivenEvent() { 
    $('someContain').append('<div id="throbber"></div>'); 
    // do some slowthings with a "on complete callback to onComplete 
} 

function onComplete() { 
    $('#throbber').remove(); 
} 

Mais il y a aussi des cas où vous ne même pas besoin de Javascript. Par exemple dans le cas de grandes images. Dans ce cas, vous pouvez le faire en utilisant HTML et CSS:

img.largeImage { 
    background: url(throbber.gif) center no-repeat; 
} 

et en HTML

<img class="largeImage" src="..." /> 

Answer 4

Vous pouvez générer le chargeur GIFs ici: http://www.ajaxload.info/

Answer 5

Il y a une façon simple de le faire sans utiliser Afficher ou masquer. Parce qu'utiliser show ou hide implique que vous devez créer un div à l'intérieur duquel vous auriez placé votre image de chargement, ce qui n'est pas vraiment nécessaire. Ceci est la façon dont

<a href="mypage.php" rel="charger">Load Page 1</a> 

<div id="LoadMe">LoadMe div</div> 

<script> 


    $('a[rel*=charger]').click(function() { 

    $('#LoadMe').html('<img src="images/facebook_style_loader.gif" />'); 

    $('#LoadMe').load($(this).attr('href')); 



    return false; 
}); 




</script> 

Une fois que vous avez fait cela, vous ne devrez ajouter tout autre supplémentaire div et utiliser pour cacher css parce que vous utiliserez afficher ou masquer. Et cela fera apparaître l'image de chargement exactement là où les choses sont supposées se charger mais le show et le hide ne permettront pas toujours que l'image de chargement apparaisse au bon endroit si vous avez beaucoup de choses sur la page que vous voulez charger . J'espère que cela a aidé.