jquery - 加载堆栈中的第一个图像时隐藏“加载器”div？

Question

我正在使用一个覆盖页面内容的 div，直到加载幻灯片中的第一个图像。我用来隐藏这个 div 的代码如下，但它不起作用：

$(function() {
  $('.slide').first(function() {
    $(this).load(function() {
      $('#loader').fadeOut('slow');
    });
  });
});

知道为什么吗？即使在整个页面加载后，“加载器” div 也不会隐藏。我已经成功运行 $('#loader').fadeOut('slow'); 在（窗口）.load（）上。

Answer 1

您的图像是通过 ajax 加载的，并且在 DOM 首次加载时不存在。尝试在将第一个图像添加到 DOM 后隐藏加载图像。

$.each(images, function(index) {
  $('#slideshow').append('<div class="slide" style="background-image:url(' + this + ');"></div>');
  if(index === 0){
    $('#loader').fadeOut('slow');
  }
});