0

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

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%;
}

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

那可能吗？还是类似的？

提前非常感谢！

4

4 回答 4

2

以下链接将带您到一个 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);
    }
});
于 2012-06-06T00:03:22.903 回答
1

尝试将整个页面内容包含在<div id='loadHide' style='display:none'>...</div>

然后您可以添加

$('#loadHide').show();

到代码块的开头，在文档完成加载后显示内容。

完成的 javascript 将是：

$(function(){
    $('#loadHide').show();
    $('#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);
});
于 2012-06-05T23:56:29.903 回答
0

display:none/display:block 可能会起作用，并且 jQuery 有一种方法，只有在页面完全加载后才运行代码。

$(document).ready(function() {
    $('#content').show();
    // I would also recommend that you start your animation here, too
});
于 2012-06-06T00:06:37.220 回答
0

解决方案很好，$(document).ready但文档可以在所有图像完成加载之前准备就绪。如果您主要关心的是等到所有图像都加载完毕，我会查看这个问题，它建议您使用$(window).load回调。此外，您可以onload向图像添加事件处理程序，以确保在加载图像之前不会开始动画。

var image = new Image();
image.onload = function() {
  //Animation code here
};
image.src = "http://i2.ytimg.com/vi/yW5Vv23HQWM/hqdefault.jpg";

这仅在您加载单个图像时才有效。如果您需要等待多个图像，您可以将动画代码放在其他位置，并且每次onload触发事件时，您会检查是否所有需要的图像都已加载。一旦它们全部加载完毕，调用你的动画代码。

于 2012-06-06T00:10:16.500 回答