javascript - 从 jQuery 中的 href 标签加载 div 中的内容

Question

我想在以幻灯片形式显示之前加载所有图像。我已经搜索了很多，但似乎没有任何效果。这是我到目前为止所拥有的，但它不起作用。我正在从 <a> 加载图像来自另一个 div 的标签。

$('.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 事件，并且相应的函数也永远不会执行。相应地编辑了上面。