Question

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

作为一个独立的，它运作得很好（尽管我缺乏技能）！我只是在(document).ready隐藏包含div的幻灯片，允许加载图像，然后在(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。

初始图库正确加载，一切看起来都不错。有效的唯一导航链接是Galleries＆gt;参与，将加载一个新节目（包含多个<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);
    }
});

Answer 2

感谢您的回复petersendidit！我确实玩过这种技术已经有一段时间了并取得了成功。我让它工作，但它每次冻结浏览器几秒钟。我认为这是因为它在每个单独的图像上完成了整个幻灯片预备例程，而不是整个集合中的一次。

我实际上能够解决这个问题，并且它非常容易，但它不一定能回答原始问题。

我只是将宽度和高度值插入到HTML中，然后脚本能够正确地格式化节目而不加载图像，因为它直接从标记中获取必要的数据，而不是图像本身！这是我上面的“PS”思想。更好的是我用来提供图像的PHP应用程序（slideshowpro - awesome），能够自动插入这些值。哇，是的。

我会说写出这个问题的过程直接帮助我解决了我的问题，所以感谢stackoverflow！

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

2 个答案: