3

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

3 回答 3

5

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

查询：

$(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-25T22:50:07.907 回答
1

我有一个类似的问题。我的解决方案并不完美，但你可以这样做：

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 提供。

于 2013-11-17T14:37:21.250 回答
1

如果您不仅想要延迟加载，还想要预加载以下幻灯片，您应该将解决方案从 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");
            }
        }
    });
});

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

于 2014-12-02T09:17:47.210 回答