jQuery .load()，在图像加载之前不显示新内容

Question

我一直在制作 jQuery 照片幻灯片。它将图像缩放到浏览器大小，并向左和向右滑动它们。没有预先确定的大小或纵横比，脚本会即时完成所有操作。它要求所有图像都完全加载，因此它可以根据每个图像自身的宽高比( width():height() 等)自定义调整每个图像的大小，计算包含 div 的宽度，并计算从一个图像到另一图像的滑动距离。

作为一个独立的项目，它运行得非常好(尽管我缺乏技能)!我只是将包含 div 的幻灯片隐藏在 (document).ready ，允许加载图像，然后运行幻灯片准备脚本 (window).load 。完成此操作后，它才会使幻灯片 div、图像等出现、调整大小、定位并准备滚动。

最终目标是能够加载任意数量的幻灯片而无需刷新页面。这样做的目的是能够不间断地播放背景音乐。我知道网站上的音乐很烦人，但目标市场非常喜欢它!

我正在使用

(target).load(page.php .element, function prepInsertNewShow() {
   //Prepare slideshow
   resizeImages();
   slideArray();
   //Show slideshow
   (target).fadeIn();
});

而且它绝对有效!问题是我无法找到一种方法来推迟准备和显示新内容，直到图像加载完成。在加载图像之前，它正在运行幻灯片准备脚本(完全依赖于完全加载的图像)。这导致了一场完全精彩的表演!我想做的是这个 -

(target).load(page.php .element, function prepInsertNewShow() {
   //Wait until images are loaded  
   $('img').load( function() {
      //Prepare slideshow
      resizeImages();
      slideArray();
      //Show slideshow
      (target).fadeIn();
   }
});

但这似乎不起作用，新内容永远不会显示。

You can see a live version here 。

初始图库加载正确，一切看起来都很好。唯一有效的导航链接是图库 > 参与，它将加载一个新节目(包含多个 <img> 标签的 div)。您将看到图像未居中，包含的 div 和幻灯片距离太小，因为它们是使用实际未加载的图像计算的。

有什么方法可以延迟处理和显示新内容，直到它完全加载为止？如有任何建议，我们将不胜感激，感谢您的宝贵时间!

PS - 我在输入此内容时突然想到，一个不错的解决方案可能是插入 "width=x" height="x"进入<img>标签，因此即使图像尚未加载，脚本也可以根据这些值工作...嗯...

Answer 1

尝试做这样的事情:

$.ajax({
    url: 'page.php',
    success: function(data) {
        var element = $(data).find('.element');
        element.find('img').addClass('loading').bind('load',function(){
            if (!element.find('img.loading').length) {
                  //Prepare slideshow
                  resizeImages();
                  slideArray();
                  //Show slideshow
                  $('#target').fadeIn();
            }
        });
        $('#target').empty().append(element);
    }
});