0

このサイトのホームページ - http://bit.ly/a3IoV5 - には、大きな画像フェージング JQuery ギャラリーがあります。

JQuery は次のとおりです。

$('.fadein img').addClass('js');

$(function() {
    $('.fadein').children().eq(0).appendTo('.fadein').show();
    setInterval(function() {
        $('.fadein :first-child').hide().appendTo('.fadein').fadeIn(2000);
    }, 8000);
});

CSS:

.js .fadein img { display: none; }
.js .fadein img:first-child { display: block; }
.fadein img { position: absolute; right: 0; top: 0; width: 1000px; height: 300px; }

そしてHTML

<div class="fadein"> 
<img src="header1.png" /> 
<img src="header2.png" /> 
<img src="header3.png" /> 
<img src="header4.png" /> 
<img src="header6.png" /> 
<img src="header7.png" /> 
<img src="header9.png" /> 
<img src="header10.png" /> 
<img src="header12.png" /> 
</div>

ページ自体の読み込み速度を向上させる何らかの画像読み込みのトリックがあることを期待していました。どんな助けでも大歓迎です。

4

2 に答える 2

0

次のように、「 js」のクラスを要素の下のすべてのimgタグに、fadeinクラスを使用して追加する場合は、提供したコードから始めます。

$('.fadein img').addClass('js');

CSS セレクターを変更する必要がある場合があります。

/* Your Current CSS */
.js .fadein img { display: none; }
.js .fadein img:first-child { display: block; }

/* Suggested CSS */
.fadein img.js { display:none; }
.fadein img.js:first-child { display:block; }

親要素にもjsクラスがある場合、現在のコードは機能しますが、最初の jQuery アクションを使用してそのクラスを追加する要素には影響しません。

訪問者が最初にページをロードするときに遅延が発生することを懸念している場合は、fadein要素に背景画像を追加することで、少なくともプレースホルダー グラフィックを提供できる場合があります。また、より圧縮された/基本的な画像 (低品質の JPEG)。

/* Suggested CSS */
.fadein { height:300px;width:1000px;background:#F5F5F5 url('http://pottstownarts.org/wp-content/themes/paca/files/headerimgs/basic.jpg') no-repeat right top; }

この画像は、動作が開始されるとギャラリーでカバーされます (確実に言うと、ギャラリーが開始されたら、常に jQuery で CSS の背景画像設定を削除することができるため、半透明の画像が変色することはありません)。

$( '.fadein' ).css( 'background-image' , '' );
于 2010-07-01T03:26:24.173 に答える
0

ページの準備ができたら、画像をロードする必要があります。画像サイズによっては、速度が劇的に向上する可能性があります。

したがって、2 番目の画像をロードしている間に最初の画像を表示する場合があります。2 番目の画像の準備ができたらすぐに、フェード アニメーションを開始します。

于 2010-06-30T14:58:20.813 に答える