Flexslider lazyloading - 僅在真正需要時才加載圖像

這實際上只是從Flexslider lazyloading的一個答案開始here我正在使用下面粘貼的代碼。我想改變它，以便圖像只在真正需要時加載。Flexslider lazyloading - 僅在真正需要時才加載圖像

我嘗試了其他的Flexslider屬性，之前和之後：但他們在第一張幻燈片上創建了一個延遲？請幫我解決一下這個問題。

$('#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"); 
    }); 
} 
});

來源

2013-09-28 Brownrice

我到底一些幫助，在這裏我們有更少的代碼:)

的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++;

來源

2013-11-25 22:50:07 Brownrice

「flexslider」似乎帶有所有東西和廚房水槽，而且沒有內置此功能，這真是令人震驚。「延遲加載」功能本身的實現取決於開發人員整合FlexSlider'_ [他們說]（https://github.com/woothemes/FlexSlider/issues/63#issuecomment-13986270）... –

我有類似的問題。我sollution是不完美的，但你可以做這樣的事情：

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"); 
    }); 
}

在啓動它加載的第一個圖像，第二個和最後一個。在它加載當前圖像之前，下一個和上一個，所以下一個圖像總是預加載。變量currentSlide和count由flexsliders回調API提供。

來源

2013-11-17 14:37:21

如果您既想延遲加載預壓，但下面的幻燈片你應該把布朗里斯的解決方案改爲

$(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"); 
      } 
     } 
    }); 
});

使用此代碼，第二張幻燈片將在頁面加載期間預加載，並且每張下一張幻燈片將在上一張幻燈片處於活動狀態時預加載。

來源

2014-12-02 09:17:47 larsbo

Flexslider lazyloading - 僅在真正需要時才加載圖像

回答

相關問題