Flexslider延迟加载-仅在真正需要时加载图像

Question

实际上，这只是从对Flexslider延迟加载的回答之后开始的，这里我使用的是下面粘贴的代码。我想更改它，以便仅在真正需要时才加载图像。

我在之前和之后尝试了其他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");
   });
 }
});

Answer 1

最后我得到了一些帮助，这里我们的代码更少了：）

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