web-dev-qa-db-fra.com

jQuery, JavaScript, HTML: comment charger des images après que tout le reste est chargé?

hé les gars, j'ai une page très complexe avec beaucoup de scripts et un temps de chargement plutôt long. En haut de cette page, je souhaite implémenter le jquery Nivo Slider (http://nivo.dev7studios.com/).

Dans la documentation, il est indiqué que je dois répertorier toutes les images du curseur à l'intérieur d'un curseur div #

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>

Cependant, je pourrais avoir 10 images avec un 1000x400px qui est assez gros. Ces images se chargeraient lors du chargement de la page. Comme ils sont dans ma tête, cela pourrait prendre un certain temps.

Je cherche un moyen d’utiliser un plugin jquery Slider (comme le nivo slider), mais soit de charger dynamiquement des images, soit de charger toutes ces images après le chargement de tout le reste de la page.

Une idée de comment je pourrais résoudre ça?

Existe-t-il même un moyen de démarrer un processus javascript après que tout le reste de la page a été chargé? S'il existe un moyen d'avoir une solution à mon problème (en utilisant la méthode jquery ajax load ()) ... Cependant, je ne sais pas comment attendre que tout le reste soit chargé, puis démarrer le curseur avec toutes les images.

javascriptjqueryimageloading
17
matt

Voici ce que nous avons fait et ça marche très bien. Nous avons ignoré la définition de l'attribut src de img et ajouté img-location à un faux attribut lsrc. Ensuite, nous chargeons une image dynamique avec la valeur lsrc et définissons la src de l'image réelle seulement après son chargement.

Il ne s’agit pas d’un chargement plus rapide, mais plutôt de montrer les images uniquement lorsqu’elles sont téléchargées complètement sur votre page, de sorte que l’utilisateur n’a pas à voir ces images à moitié chargées. Une image de substitution peut être utilisée pendant le chargement des images réelles.

Voici le code.

 $(function(){
    $.each(document.images, function(){
               var this_image = this;
               var src = $(this_image).attr('src') || '' ;
               if(!src.length > 0){
                   //this_image.src = options.loading; // show loading
                   var lsrc = $(this_image).attr('lsrc') || '' ;
                   if(lsrc.length > 0){
                       var img = new Image();
                       img.src = lsrc;
                       $(img).load(function() {
                           this_image.src = this.src;
                       });
                   }
               }
           });
  });

Edit: Astuce consiste à définir l'attribut src uniquement lorsque cette source est chargée dans img temporaire. $(img).load(fn); s'en charge. 

31
simplyharsh

En plus de la réponse de Xhalent, utilisez la fonction .append () de jQuery pour les ajouter au DOM:

Votre HTML aurait juste:

<div id="slider">
</div>

Et alors votre jquery serait:

jQuery(function(){
    $("#slider").append('<img src="images/slide1.jpg" alt="" />');
});
4
Matt Asbury

check out jquery load (), il attend tout, y compris les graphiques

$(window).load(function () {
  // run code
});

lors du chargement, vous pouvez ensuite charger les images en utilisant:

var image = new Image();
image.src = "/path/to/huge/file.jpg";

Vous pouvez aussi ajouter une fonction à l'image.

image.onload = function() {
  ...
}
1
Han Dijk

la meilleure façon d'utiliser estb -lazy js. bLazy est un script d'image à chargement paresseux léger (moins de 1,2 Ko minifié et gzippé). Il vous permet de charger paresseux et de gérer plusieurs images de vos images, ce qui vous permet d'économiser de la bande passante et des requêtes de serveur. L’utilisateur aura des temps de chargement plus courts et enregistrera les données chargées s’il ne parcourt pas toute la page. Pour une liste complète des options, des fonctions et des exemples, rendez-vous sur le blog: http://dinbror.dk/blog/blazy .

L'exemple suivant est un exemple de chargement paresseux d'images réactives multi-portions avec un rappel d'image :) Si la largeur de votre périphérique est inférieure à 420 px, elle servira une version plus claire et plus petite de l'image. Quand une image est chargée, elle supprime le chargeur dans le rappel.

En html

 <img class="b-lazy"
     src="placeholder-image.jpg"
     data-src="image.jpg"
     data-src-small="small-image.jpg"
     alt="Image description" />

En js

var bLazy = new Blazy({
        breakpoints: [{
        width: 420 // Max-width
          , src: 'data-src-small'
    }]
      , success: function(element){
        setTimeout(function(){
        // We want to remove the loader gif now.
        // First we find the parent container
        // then we remove the "loading" class which holds the loader image
        var parent = element.parentNode;
        parent.className = parent.className.replace(/\bloading\b/,'');
        }, 200);
        }
   });

Exemple

0
TarangP