jquery chargement de l'image, bien que des éléments de charges

Je suis à la recherche pour n'importe quel tutoriels/articles à propos de l'insertion d'un chargement GIF alors que les éléments de la charge, je l'ai vu dans quelques sites. Je ne peux que semblent trouver des articles sur le préchargement des images.

J'ai fait un plugin permettant de simplifier tout cela. Voici la démo: jquery-values.googlecode.com/svn/other/loading/...

OriginalL'auteur michael | 2009-06-05

  1. 6

    En fonction de ce que vous essayez de faire, il n'est pas particulièrement difficile. La suite montrera un chargement de l'image (pré-existant), puis de charger du code html récupéré via ajax, puis à la fin, il va se cacher le chargement de l'image.

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

    Si les données à charger les images, puis les choses se compliquent un peu car la charge de rappel peut être appelée avant que les données de l'image est effectivement téléchargé. Une stratégie dans ce cas est d'avoir un script fourni avec le HTML qui sait combien d'images sont à être chargé et avoir une onloaded gestionnaire d'événements qui, en gros, les tiques hors le nombre d'images jusqu'à ce que toutes les images ont été téléchargées. J'ai l'habitude de le coupler avec un délai d'attente dans le cas où le onloaded gestionnaire n'a pas ajouté avant que les données d'image sont disponibles (dans ce cas il ne se déclenche pas).

    OriginalL'auteur tvanfosson

  2. 2

    Une stratégie générale consiste à placer le chargement de l'image dans un div ou span tag, et de l'afficher ou la masquer lorsque vous voulez le montrer. Si vous voulez la montrer au départ, il suffit de placer un jQuery .hide() de la fonction sur la div ou span en jQuery sur la fonction ready.

    Voir le jQuery docs sur show() et hide()

    ou de définir l'image d'arrière-plan de la div pour le "chargement" de l'image. Ensuite, vous n'avez pas à faire quoi que ce soit (sauf si le navigateur dessine un espace réservé pendant le chargement)

    OriginalL'auteur jonstjohn

  3. 2

    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 n'avez 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="..." />

    OriginalL'auteur elmuerte

  4. 2

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

    OriginalL'auteur Mat Ryer

  5. 0

    Il y a un moyen plus simple de le faire sans l'aide d'Afficher ou de masquer. En raison de l'utilisation d'afficher ou de masquer implique que vous devez créer un div, quelque part à l'intérieur de laquelle vous avez placé votre chargement de l'image qui en réalité n'est pas nécessaire. C'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 n'aurez PAS besoin d'ajouter à tous les autres div et css pour cacher parce que vous allez être en utilisant montrer ou cacher. Et aussi cela permet de rendre le chargement de l'image apparaissent exactement où les choses sont censées charge, mais le masquer et ne permet pas toujours de chargement de l'image à afficher au bon endroit si vous avez beaucoup de choses sur la page que vous souhaitez charger.
    Espérons que cela a aidé.

    OriginalL'auteur John Max