Flexslider lazyloading - nur ein Bild laden, wenn es wirklich benötigt wird

Dies ist wirklich erst nach einer Antwort auf Flexslider lazyloading hier ich bin mit diesem code Habe ich unten eingefügt. Ich möchte es ändern, so dass die Bilder nur geladen, wenn Sie wirklich nötig sind.

Ich habe versucht, die anderen Flexslider Eigenschaften, vor: und nach: aber Sie schuf eine Verzögerung auf der ersten Folie? Bitte bekomme ich etwas Hilfe mit diesem.

$('#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");
   });
 }
});
InformationsquelleAutor Brownrice | 2013-09-28
  1. 5

    Bekam ich etwas Hilfe am Ende, hier haben wir weniger code 🙂

    Jquery:

    $(window).load(function() {
 $('#sld-auto-930').flexslider({
  //put your settings properties here
  after: function (slider) {       
  //instead of going over every single slide, we will just load the next immediate slide
  var slides = slider.slides,
      index = slider.animatingTo,
      $slide = $(slides[index]),
      $img = $slide.find('img[data-src]');
      if($img){
      $img.attr("src", $img.attr('data-src')).removeAttr("data-src");
     }
}
});

    HTML:

    if($i > 0) {
    echo '<img class="lazy'.$i.'"src="" data-src="'.$src.'" alt="'.$alt.'">';
 }else {
    echo '<img class="first'.$i.'"src="'.$src.'"  alt="'.$alt.'">';                         }       
$i++;
    • Es ist wirklich überwältigend, dass flexslider zu kommen scheint und alles in ein Spülbecken und verfügt nicht über dieses feature bereits integriert. " Die Umsetzung der "lazy-load" - Funktion selbst ist dem Entwickler die Integration von FlexSlider' Sie sagen...
    InformationsquelleAutor Brownrice
  2. 1

    Ich hatte ein ähnliches problem. Meine sollution ist nicht perfekt, aber Sie könnte so etwas tun:

    start: function(slider){
    var slcount = slider.count-1;
    $(slider).find("img.lazy:eq(0), img.lazy:eq(1), img.lazy:eq(" + slcount + ")").each(function () {
        var src = $(this).attr("data-original");
    $(this).attr("src", src).removeAttr("data-original");
});
},
before: function(slider) {
    var nxtslide = slider.currentSlide+1;
    var prvslide = slider.currentSlide-1;
    $('.flexslider .flex-active-slide').parent().find('img.lazy:eq(' + slider.currentSlide + '), img.lazy:eq(' + nxtslide + '), img.lazy:eq(' + prvslide + ')').each(function () {
        var src = $(this).attr("data-original");
        $(this).attr("src", src).removeAttr("data-original");
    });
}

    Auf start lädt er das erste Bild, das zweite und das Letzte. Bevor es lädt das aktuelle Bild, die nächste und die Vorherige, so dass die nächsten Bilder sind immer vorbelastet. Die Variablen currentSlide und Graf werden von flexsliders callback-API.

    InformationsquelleAutor Sebastian Starke
  3. 1

    Wenn Sie nicht nur wollen, lazy loading, aber das Vorabladen der folgenden Folien ändern Sie die Lösung von Brownrice zu

    $(window).load(function() {
    $('#sld-auto-930').flexslider({
        //put your settings properties here
        start: function (slider) {
            //preloading the second slide on initialization
            var slides = slider.slides,
            $slide = $(slides[1]),
            $img = $slide.find('img[data-src]');
            if($img){
                $img.attr("src", $img.attr('data-src')).removeAttr("data-src");
            }
        },
        after: function (slider) {       
            //instead of going over every single slide, we will just load the next immediate slide
            var slides = slider.slides,
            index = slider.animatingTo+1,
            $slide = $(slides[index]),
            $img = $slide.find('img[data-src]');
            if($img){
                $img.attr("src", $img.attr('data-src')).removeAttr("data-src");
            }
        }
    });
});

    mit diesem code das zweite dia wird vorab geladen werden, während das laden der Seite und jeder folgenden Folie wird vorab geladen werden, wenn die Vorherige Folie aktiv ist.

    InformationsquelleAutor larsbo
Schreibe einen Kommentar