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

【问题标题】：Flexslider lazyloading - only load an image when it's truly neededFlexslider 延迟加载 - 仅在真正需要时才加载图像
【发布时间】：2013-10-04 23:58:54
【问题描述】：

这实际上只是对 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");
   });
 }
});

【问题讨论】：

标签： jquery jquery-plugins loading lazy-evaluation flexslider

【解决方案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++;

【讨论】：

flexslider 似乎配备了所有东西和一个厨房水槽，但没有内置此功能，这真是令人兴奋。'“延迟加载”的实现功能本身取决于集成 FlexSlider 的开发人员' they say...

【解决方案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 由 flexslider 回调 API 提供。

【讨论】：

【解决方案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");
            }
        }
    });
});

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

【讨论】：