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

hé les gars,
j'ai une question très complexe de la page avec beaucoup de scripts et d'un assez long temps de chargement. Au sommet de cette page, je veux mettre en œuvre le jquery Nivo Slider (http://nivo.dev7studios.com/).

Dans la documentation, il dit que j'ai la liste de toutes les images pour le curseur à l'intérieur d'un div#curseur

<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 grand. Ces images de la charge lors du chargement de la page. Depuis qu'ils sont dans ma tête, cela peut prendre un certain temps.

Je cherche un moyen d'utiliser toute jquery Slider Plugin (comme le nivo slider), mais soit de charger dynamiquement des images ou de charger toutes les images après tout le reste sur mon page est chargée.

Une idée de comment je pourrais résoudre ce problème?

Est-il encore un moyen de démarrer une javascript processus après tout le reste sur la page est chargée? Si il y a un moyen je pourrais avoir une solution à mon problème (en utilisant l'ajax de jquery méthode load ()) ... Cependant je n'ai aucune idée de comment attendre pour tout le reste à charge et ensuite démarrer le diaporama avec toutes les images.

source d'informationauteur matt

Voici ce que nous avons fait et sa fonctionne très bien. Nous avons sauté réglage src attribut de img et a ajouté img-emplacement d'un faux attribut lsrc. Ensuite, on charge une image dynamique avec lsrc valeur, et de définir la src de l'image réelle qu'après son chargement.

Ce n'est pas un chargement plus rapide, mais son propos en montrant les images que lorsque ses téléchargé sur votre page, de sorte que l'utilisateur de ne pas voir que gênant demi-images chargées. Un espace réservé d'image peuvent être utilisés lors de l'effectif des images sont en cours de chargement.

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: Truc est de mettre la src attribut uniquement quand la source est chargé temporaire img. $(img).load(fn); poignées.

4

En plus de Xhalent de réponse, utilisez le .append() de jQuery pour ajouter à la DOM:

Votre HTML aurait juste:
```
<div id="slider">
</div>
```
Et puis votre jquery serait:
```
jQuery(function(){
    $("#slider").append('<img src="images/slide1.jpg" alt="" />');
});
```
1

découvrez jquery load() de l'événement, il attend de tout, y compris des graphiques
```
$(window).load(function () {
  //run code
});
```
sur la charge, vous pouvez charger les images à l'aide de:
```
var image = new Image();
image.src = "/path/to/huge/file.jpg";
```
Vous pouvez ajouter une fonction onload de l'image trop
```
image.onload = function() {
  ...
}
```
0

la meilleure façon de l'utiliser est b -paresseux js.
bLazy est un léger lazy loading image de script (moins de 1,2 KB minifiés et gzippé). Il vous permet de lazy load et multi-servir vos images, vous pouvez économiser de la bande passante et des demandes de serveur. L'utilisateur aura des temps de chargement plus rapide et d'enregistrer les données chargées si il/elle n'a pas de parcourir l'ensemble de la page.
Pour une liste complète des options, fonctions et exemples le post de blog: http://dinbror.dk/blog/blazy.

L'exemple suivant est un chargement différé de plusieurs portions images responsives exemple avec une image de rappel : Si votre appareil largeur est inférieure à 420 px ça va servir plus légère et plus petite version de l'image. Lorsqu'une image est chargée, elle enlève 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

-2

jquery a une syntaxe pour l'exécution de javascript après le document est chargé:

<script type="text/javascript">
jQuery(function(){

//your function implementation here...

});
</script>

Vous devez vous connecter pour publier un commentaire.