在图像之前延迟加载Flexslider

Question

嘿伙计我试图懒得加载我的flexslider幻灯片放在我的网站上，但我遇到了一个问题，所有的图像将加载并出现在网站上几秒钟然后滑块将加载。我认为这种情况正在发生，因为只有在加载所有图像后才会加载滑块。我的网站是一个wordpress网站，我在几个div中加载了flexslider。

这是加载前的样子：

我尝试过使用一个脚本，据说在图像之前首先加载滑块，但这似乎不起作用：

$(window).load(function() {
  $('.flexslider').flexslider({
    touch: true,
    slideshow: false,
    controlNav: true,
    slideshowSpeed: 7000,
    animationSpeed: 600,
    initDelay: 0,
    start: function(slider) { // Fires when the slider loads the first slide
      var slide_count = slider.count - 1;

      $(slider)
        .find('img.lazy:eq(0)')
        .each(function() {
          var src = $(this).attr('data-src');
          $(this).attr('src', src).removeAttr('data-src');
        });
    },
    before: function(slider) { // Fires asynchronously with each slider animation
      var slides     = slider.slides,
          index      = slider.animatingTo,
          $slide     = $(slides[index]),
          $img       = $slide.find('img[data-src]'),
          current    = index,
          nxt_slide  = current + 1,
          prev_slide = current - 1;

      $slide
        .parent()
        .find('img.lazy:eq(' + current + '), img.lazy:eq(' + prev_slide + '), img.lazy:eq(' + nxt_slide + ')')
        .each(function() {
          var src = $(this).attr('data-src');
          $(this).attr('src', src).removeAttr('data-src');
        });
    }
  });
});

任何帮助将不胜感激 感谢

Answer 1

所以我无法找到一个明确的策略来延迟加载我网站上的flex-slider。我的问题的本质是我的图片是在加载flex-slider之前加载的。因此，解决此问题的方法是允许隐藏图像，直到加载flex-slider。

我将CSS更改为：

#banner{display:none;}

然后我添加了一个javascript行，在初始化flex-slider之后显示该id。

jQuery('div#banner').show();

现在网站加载其余内容，然后加载flex-slider。