预加载脚本后脚本未正确触发

Question

脚本经验非常有限。

我正在尝试让一个预加载器在第二个脚本循环通过它们之前覆盖我在引导轮播中加载的图像。

这个脚本是我能得到的。

<!-- Preloader -->
<script type="text/javascript">
    //<![CDATA[
        $(window).load(function() { // makes sure the whole site is loaded
            $('#status').fadeOut(); // will first fade out the loading animation
            $('#preloader').delay(50).fadeOut('slow'); // will fade out the white DIV that covers the website.
            $('body').delay(50).css({'overflow':'visible'});
        })
    //]]>
</script>

和

<!-- Script to Activate the Carousel -->
<script type="text/javascript">
$('#preloader').delay(50).fadeOut('slow', function(){
  $('.carousel').carousel({
      pause: "none",
      interval: 500
  });
});
</script>

我需要的顺序是加载动画 div，覆盖在“#myCarousel”中加载的图像 > 图像已加载 > 覆盖 div 淡出 > 淡出调用：

$('.carousel').carousel({
        interval: 500, //changes the speed
        pause: "none",
    })

图像在最后一张幻灯片上闪烁并停止。

在上面的例子中，它似乎工作了——预加载器工作，轮播也工作，但没有达到预期的速度； “500”的意思是半秒。它似乎也打破了暂停功能，事实上暂停设置为“无”似乎被忽略了。

在@Shikkediel 的帮助下，脚本现在显示为：

<script type="text/javascript">
$(window).on('load', function() {

    $('#status').fadeOut()
    .queue(function() {

        $('#preloader').delay(50).fadeOut('slow', function() {
            $('#myCarousel').attr('data-ride', 'carousel');
            $('.item').first().addClass( 'active' );
            $('body').delay(50).css({'overflow':'visible'});
            $('.carousel').carousel({
            });
        });
        $(this).dequeue();
    });
});
</script>

– 速度和暂停现在在数据属性中设置，将它们设置在其中非常好。

但是，预加载器仍然没有预加载图像！

这是我正在运行的测试：http://maxsendak.com/test/pu_v2/max_page.html

Answer 1

这是初稿，一些优化的脚本：

$(window).on('load', function() {

    $('#status').fadeOut()
    .queue(function() {

        $('#preloader').delay(50).fadeOut('slow', function() {
            $('#myCarousel').attr('data-ride', 'carousel');
            $('.item').first().addClass('active');
            $('body').delay(50).css({'overflow':'visible'});
            $('.carousel').carousel({
                interval: 500,
                pause: 'none'
            });
        });
        $(this).dequeue();
    });
});

但它并没有完全达到预期的结果 - 图像被设置为背景，并且没有被 onload 事件检测到。我建议预加载，附加到文档并隐藏。这应该为滑块缓存它们。在这里进行 Ajax 调用似乎不太合适：

$(document).ready(function() {

    var path = 'http://www.maxsendak.com/test/pu_v2/img/people/max/';

    for (var i = 1; i <= 5; i++) {
        $('<img class="preload" src="' + path + i + '.jpg" alt=""/>').appendTo('body');
    }

    $('.preload').each(function() {
        $(this).one('load', function() {
            $(this).hide();
        });
    });

    $(window).on('load', function() {

        $('#status').fadeOut()
        .queue(function() {

            $('#preloader').delay(50).fadeOut('slow', function() {
                $('#myCarousel').attr('data-ride', 'carousel');
                $('.item').first().addClass('active');
                $('body').delay(2500).css({'overflow':'visible'}); // after slider finishes
                $('.carousel').carousel();
            });
            $(this).dequeue();
        });
    });
});

如果图像不是背景，那段脚本当然可以省略，那么 onload 事件就足够了，并且可以防止幻灯片之间的闪烁。

次要更新 - 根据this article Firefox 可能存在一些问题（至少在 Windows 7 桌面上是 37 版），预加载图像的样式与目标背景图像的样式不匹配。所以我添加了我可以在滑块上看到的相关样式 应该 就足够了（也使附加图像更具可读性）：

for (var i = 1; i <= 5; i++) {

    $('<img class="preload" alt=""/>')
    .attr('src', path + i + '.jpg')
    .css({'height': '100%', 'position': 'relative', 'left': 0})
    .appendTo('body');
}

希望这是流畅的跨浏览器功能的最终细节。