web-dev-qa-db-fra.com

Chargement paresseux dans Flexslider

J'essaie d'obtenir un chargement paresseux en travaillant pour Flexslider en utilisant le plugin jquery Lazy Loading et en suivant les instructions du site: http://www.appelsiini.net/projects/lazyload

Je charge le script du plugin et je ne vois aucune erreur sur la console. J'ai essayé sans que le conteneur ou les options soient passés dans la fonction lazyload et toujours rien. Je passe des heures à ça. 

$("img.lazy").lazyload({
  effect: "fadeIn",
  container: $(".slides > li")
});

Est-ce que quelqu'un sait comment utiliser le chargement paresseux dans Flexslider?

jqueryjquery-pluginslazy-loadingflexslider
16
Encore PTL

J'ai donc ajouté la page d'image réelle à l'attribut data-attr de la balise image et à l'événement after, je trouverais l'image avec la classe active et définir l'attribut img src sur la valeur data-attr.

0
Encore PTL

J'ai implémenté une charge paresseuse lors du défilement. Cette solution fonctionne mieux pour les grandes collections par rapport aux autres solutions proposées ici. Lors de l'initialisation, il charge uniquement les 5 premières images, puis 3 images pour chaque animation.

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>

et code javascript:

    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        controlNav: false,
        init: function (slider) {
            // lazy load
            $("img.lazy").slice(0,5).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        },
        before: function (slider) {
            // lazy load
            $("img.lazy").slice(0,3).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        }
    });
11
Roman Podlinov

La méthode fonctionne assez bien pour moi, mais l'image de chargement doit être de la même taille que le reste des images. J'utilise réellement http://imageresizing.net/ avec mode = pad

Dans le conteneur principal que vous utilisez pour flexslider, placez l'image réelle dans un attribut "data-src"

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>

Dans votre fonction d'initialisation, utilisez le rappel "start" pour remplacer l'image de chargement par l'image réelle et supprimez l'attribut.

$('#slider').flexslider({
    start: function (slider) {
       // lazy load
       $(slider).find("img.lazy").each(function () {
          var src = $(this).attr("data-src");
          $(this).attr("src", src).removeAttr("data-src");
       });
     }
});

J'espère que ça aidera quelqu'un. 

7
Tommy W

J'essaie de faire la même chose en utilisant Flexslider 2 et le Lazy Load Plugin pour jQuery .

Il semble que la propriété container ne fonctionne que si l'élément est stylé avec overflow:scroll;

J'ai pu faire fonctionner la charge paresseuse en utilisant ce code:

$("#flexcontainer img.lazy").lazyload({
    failure_limit : 10,
    effect: "fadeIn",
    skip_invisible : false
});

Cependant, ce lazy charge tout tout à la fois au lieu d’être animé par le flexslider.

J'ai également pu le faire fonctionner avec la souris au moyen de ce code:

 $("#flexcontainer img.lazy").lazyload({
     failure_limit : 10,
     effect: "fadeIn",
     event : "mouseover"
 });

Cependant, cela ne fonctionne pas sur les appareils tactiles. 

Je pense que la clé est de créer votre propre événement personnalisé et de le déclencher après un rappel flexslider tel que le rappel after.

4
alexandria757

Afin de proposer une solution alternative, une autre option consiste à utiliser un curseur responsive qui contient déjà une charge paresseuse intégrée, par exemple un curseur royal, voici le lien -> http://dimsemenov.com/plugins/royal -slider/ /

2
uknowit2

Vous pourriez aussi bien initialiser lazyload avec un événement déclencheur personnalisé ...

$jQ("img[data-original]").lazyload({
            effect: "fadeIn",
            skip_invisible: false,
            event: "forceLazyLoad"
        });

... puis appelez cet événement pour précharger toutes vos images à l'intérieur du flexslider avec un appel du type: 

$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad');
1
Carlos A. Cabrera