延迟 jQuery 动画，直到 Supersized 插件显示背景图像答案

【问题标题】：Delay jQuery animation until the background image is displayed by Supersized plugin延迟 jQuery 动画，直到 Supersized 插件显示背景图像
【发布时间】：2013-02-01 05:00:39
【问题描述】：

以前有人问过类似的问题，但我的问题有点不同：

我正在使用 Supersized jQuery 插件来加载单个全屏背景图像。加载图片的代码是这样的：

<script type="text/javascript">  

            jQuery(document).ready(function($) {

                $.supersized({
                    //Background image
                    slides  :  [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]                  
                });

$('#content').delay(3500).fadeIn(600);

            });


        </script>

正如您在代码中看到的，我在“超大”函数之后链接了淡入淡出效果。我想在背景图像（bg.jpg）之后淡入#content div，不仅完成加载而且完成淡入。我使用了我不太喜欢的解决方案：在我的fadeIn效果之前设置一个很长的延迟。

在超大图像完成淡入后淡入内容 div 的最佳方式是什么？

非常感谢您的帮助！

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案1】：

如果有人仍在寻找解决方案，这就是我所做的：

Supersized.3.2.7.js

在 img.load 函数之后，在 base._start 函数中，我添加了以下内容：

img.fadeOut();
img.bind("load", function () { $(this).fadeIn(750); });

【讨论】：

【解决方案2】：

找到我自己的答案：

解决方法是编辑超大的核心 js 文件。在文件中，在这段代码之后：

$('#supersized-loader').hide();     //Hide loading animation
element.fadeIn('fast');         //Fade in background
resizenow();

我添加了自己的行：

$('#content').delay('fast').fadeIn('fast');

像魔术一样工作！

【讨论】：

【解决方案3】：

您是否尝试过使用jQuery .ready() 函数？

jQuery(document).ready(function($) {
  $.supersized({
    //Background image
    slides  :  [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]                  
  });

  $.supersized.ready( function() {
    $('#content').fadeIn(600);
  });

});

【讨论】：

是的，那会很好，不是艾琳吗？ :-) 不幸的是，它不起作用。 ready() 方法不等待图像淡入；它甚至不等待图像加载。 load() 方法通常就足够了，但 Supersized 插件似乎比这更复杂一些，因此这种类型的解决方案也不适用于 load()。如果有更多的想法，我将不胜感激。