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

ご覧のとおり、これはフルスクリーンの画像と色です。問題は、Webサーファーがそのイントロを見逃したり、画像の読み込み中に悪い方法で導入されたりする可能性があることです。 、ページの読み込み中にページ内のすべてのコンテンツを非表示にする方法があるかどうかを知りたいのですが、そのページのすべてのコンテンツが読み込まれたときに表示できるようにします。おそらく表示：読み込み中に何も表示されず、ページが読み込まれるとブロックされます。そのようなものは機能しますが、

それは可能ですか？またはそれに似ていますか？

よろしくお願いします！

4

4 に答える 4

2

次のリンクから、jqueryローディングプラグインに移動します。このプラグインを使用すると、Webサイトにプリローダーを追加できます。これは、問題の優れた解決策になるはずです。

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 に答える