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，其中包含加载在＆＃34;＃myCarousel＆＃34; ＆GT;图片已加载＆gt;覆盖div淡出＆gt;淡出电话：

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

图像轻弹并在最终幻灯片上停止。

在上面的例子中，似乎工作 - 预加载器工作，旋转木马也工作，但没有达到预期的速度; ＆＃34; 500＆＃34;意味着半秒钟。它似乎也打破了暂停功能，事实暂停被设置为＆＃34; none＆＃34;似乎被忽略了。

在@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');
}

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

脚本在预加载器脚本之后未正确触发

1 个答案: