Comment puis-je contrôler comment Nivoslider précharge les images?

Je suis l'aide de l'excellent Nivoslider plugin pour mettre en valeur un ensemble de photos sur ma page d'accueil, actuellement de 5. Tout fonctionne très bien, mais chaque photo ajoute environ 150K pour le poids de la page. Je veux en fait la vitrine d'environ 10 "diapositives", mais depuis toutes ces images sont préchargés à l'ouverture de la page, le poids de la page va bientôt devenir (trop) grande, en particulier parce que de nombreux utilisateurs ne seront probablement pas attendre pour le "show" à la fin.

Je me demandais si il est possible de pas précharger les images, ou bien, seulement x images de l'avant. Je ne trouve rien à ce sujet dans la documentation, donc je présume qu'il n'est pas pris en charge nativement. Des idées?

source d'informationauteur Ferdy

  1. 20

    J'ai été à la recherche d'une solution similaire. J'ai une galerie d'images sur un site web qui charge une douzaine d'images de haute qualité sur la page d'accueil à l'aide d'un diaporama plugin. Et toutes ces images sont chargées à la fois ajouter 2 à 3 mégas pour le poids de la page. Pas de dés.

    Nivo feuilles de traitement d'image du navigateur. Il lit le <img src="..."> tag puis gussies les images dans un diaporama avec de la nappe des effets de transition. Il n'y a rien dans le code de contrôler le chargement ou le préchargement des images.

    Heureusement Nivo est sur Github. Donc, je bifurquais à l'appui de chargement différé des images:

    https://github.com/leepowers/Nivo-Slider

    L'utilisation est la même. Avec une petite modification dans le code HTML

    <div id="slider">
 <img src="my-large-image.jpg" alt="">
 <img src="my-large-image2.jpg" alt="">
 <img src="another-biggun.jpg" alt="">
</div>

    Changer l'image src attributs de data-src attributs:

    <div id="slider">
 <img data-src="my-large-image.jpg" alt="">
 <img data-src="my-large-image2.jpg" alt="">
 <img data-src="another-biggun.jpg" alt="">
</div>

    Depuis data-src n'est pas analysé les images ne sont pas chargées jusqu'à ce Nivo est prêt à les utiliser. data-src a la préséance sur src ce qui signifie que vous pouvez spécifier low-res versions dans src pour les non-javascript utilisateurs, ou remplir src avec une entretoise de l'image de sorte que le HTML va passer d'un validateur.

    Check it out! Je me suis mise en œuvre sur plusieurs projets. Une démo est disponible ici: http://powers1.net/files/nivo/demo/demo-lazy.html

  2. 1

    Nivo slider ne pas avoir une image de préchargement. Si vous utilisez votre slider avec jQuery load(comme dans les démos de nivo), nivo curseur va attendre jusqu'à ce que toutes les images chargées dans la page. 

    $(window).load(function() {
        $('#slider').nivoSlider();
});

    Si vous ne voulez pas attendre jusqu'à ce que toutes les images chargées, vous pourriez préférer document prêt événement comme ci-dessous. Pas d'images sera préchargé.

    $(document).ready(function() {
   $('#slider').nivoSlider(); 
});

    Si vous voulez avoir contrôlé le préchargement;
    Vous pouvez utiliser l'un de préchargement d'image plugins de jQuery;
    http://www.farinspace.com/jquery-image-preload-plugin/

    $(document).ready(function() {
   $('#slider').nivoSlider(); 
   //Before starting the slider preload your images then start your slider.
   $.imgpreload(['/images/a.gif','/images/b.gif'],
   {
    all: function()
    {
       //Start slider here
    }
   });
});
  3. 0

    vous pouvez créer une fonction pour mettre les images dans un tableau et de la précharge 

    jQuery.preloadImages = function() {   
 for(var i = 0; i<arguments.length; i++)   
{
      jQuery("<img>").attr("src", arguments[i]);   
}

    }

    et pour utiliser la fonction, un tableau de l'image url :

    $.preloadImages("test.png", "/imageUrl");
  4. 0

    Ce que si par défaut au chargement de la page, vous permet d'initialiser le curseur avec un sous-ensemble des images. À la suite de laquelle vous créer dynamiquement les images à l'aide de jQuery et de ré-initialiser le curseur? Consultez la rubrique suivante pour un exemple à l'aide d'un appel ajax.

    Nivoslider mise à jour ou de redémarrer, ou même les détruire

  5. 0

    La réponse de Burak est bien pour moi, mais il ne fonctionne pas dans Safari.
    J'ai essayé de modifier et c'est ma solution:

    $(window).ready(function() {
   $('#slider').nivoSlider();

    Il fonctionne correctement dans Safari, IE et Firefox. Bien sûr, vous pouvez ajouter de la contrôlée de précontrainte.

  6. -1

    Vous pouvez masquer la #slider jusqu'à ce que le chargement de la page, puis charger la div.

    1. Ajouter display:none; à la #slider dans votre fichier CSS.

    2. Ajouter $('#slider').css('display','block'); dans votre $(window).load(function() {..}); avec votre code existant, de sorte qu'il devient:

      $(window).load(function() {
    $('#slider').css('display','block');
});