Flexslider lazyloading - загружать изображение только тогда, когда это действительно необходимо

Question

Это действительно только ответ на вопрос Flexzlider lazyloading here Я использую тот код, который я вложил ниже. Я бы хотел изменить его, чтобы изображения загружались только когда это действительно необходимо.

Я пробовал другие свойства 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++; 

Answer 2

У меня была аналогичная проблема. Мой гуманного не является совершенным, но вы могли бы сделать что-то вроде этого:

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 предоставляются API обратного вызова flexsliders.

Answer 3

Если вы хотите не только отложенной загрузки, но поджимать следующие слайды, вы должны изменить решение от Brownrice до

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

с этим кодом второй слайд будет предварительно загружен во время загрузки страницы, и каждый следующий слайд будет предварительно загружен при активном предыдущем слайде.