javascript - jQuery 加载器的介绍

Question

我的网站有一个带有大量图像的小介绍，这是上面的小动画:

Jquery

$(function(){
    $('#intro-left').stop().delay(5000).animate({'width':'0'},4000, 'easeOutQuint');
    $('#intro-right').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
    $('#intro-rights').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
    $('#intro-logo').stop().delay(10000).fadeOut(1500);
});

HTML

<div id="intro-left"></div>
<div id="intro-right"></div>
<div id="intro-rights"></div>
<div id="intro-logo"><img class="top" src="images/intro_top.jpg"><img class="logo" src="images/intro-logo.jpg"><img class="bot" src="images/intro-bot.jpg"></div>
<div id="header">
    Rest of the Site...

CSS

#intro-left {
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    background: url(images/intro-left.png) right no-repeat;
    width: 58%;
    height: 100%;
}  

#intro-right {
    position: absolute;
    z-index: 9000;
    top: 0;
    left: 32%;
    background: url(images/intro-right.png) left no-repeat;
    width: 68%;
    height: 100%;
}

正如你所看到的，它只是全屏图像和颜色，问题是网络冲浪者可能会错过这个介绍，或者以错误的方式介绍它，加载图像...... 它让介绍变得丑陋，然后， 我想知道是否有一种方法可以使页面中的所有内容在加载时不可见，然后在加载该页面的所有内容时使其可见。 也许在加载期间显示:无，然后页面正在加载使其阻塞，类似的东西会起作用，

这可能吗？或者类似的？

提前非常感谢!

Answer 1

以下链接将带您访问 jquery 加载插件，该插件允许您向网站添加预加载器，这应该是解决您问题的一个很好的解决方案。

http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/

您可以使用 onComplete() 函数在页面/预加载器完成后开始介绍。

可能看起来像这样:

 $("body").queryLoader2({
    barColor: "#6e6d73",
    backgroundColor: "#fff1b0",
    percentage: true,
    barHeight: 30,
    completeAnimation: "grow",
    onComplete: function(){
        $('#intro-left').stop().delay(5000).animate({'width':'0'},4000, 'easeOutQuint');
        $('#intro-right').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
        $('#intro-rights').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
        $('#intro-logo').stop().delay(10000).fadeOut(1500);
    }
});