Question

我希望在幻灯片中显示之前加载所有图像。我一直在寻找，但似乎没有任何工作。这就是我到目前为止所做的工作。我正在从另一个div的<a>标记加载图像。

$('.slideshow').load(function(){
    if (loaded<length){
        first = $(settings.thumb).eq(loaded).find('a').attr("href");
        $('<img src="'+first1+'"/>').appendTo('.slideshow');
    }
    else{ $('.slideshow').show(); }
    loaded++;
});

Answer 1

为每个图片添加一个事件监听器，以响应浏览器加载图像的时间，然后将其附加到幻灯片中。

var $images = $("#div_containing_images img");
var numImages = $images.length;
var numLoaded = 0;
var $slideshow = $(".slideshow");

$images.each(function() {
  var $thisImg = $(this);
  $thisImg.on("load", function() {
    $thisImg.detach().appendTo($slideshow);
    numLoaded++;
    if (numLoaded == numImages) {
      $slideshow.show();
    }
  });
});

如果图像无法加载，最好还要监听error事件。这样，您可以增加numLoaded以解决损坏的图像。否则，在图像损坏的情况下，您的幻灯片将永远不会显示。

另请注意，通过调用detach()后跟appendTo()，我正在移动DOM中的图像。相反，如果您想要复制图片，请使用clone()代替detach()。

*编辑修改用户的确切使用案例*

  var $images = $("li.one_photo a");
  var numImages = $images.length;
  var numLoaded = 0;

  $images.each(function() {
    $('<img />',
      { src: $(this).attr("href") })
      .appendTo('.slideshow')
      .on("load error", function() {
        numLoaded++;
        if(numLoaded == numImages) {
          $('.slideshow').show();
        }
      });
  });

*编辑＃2 *

刚刚意识到你将所有内容都放在$(".slideshow").load()函数中。由于$(".slideshow")表示DIV，因此它永远不会引发load事件，并且相应的函数将永远不会执行。因此在上面编辑。

从jQuery中的href标记加载div中的内容

1 个答案: