Question

这实际上仅仅是对Flexslider 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由flexsliders回调API提供。

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

使用此代码，第二张幻灯片将在页面加载期间预加载，并且当上一张幻灯片处于活动状态时，将预加载每个后续幻灯片。

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

3 个答案: