jQuery画像スライダは一度にすべての画像を読み込みます

私は、自動スライディングモーションで画像を定期的に表示する私のウェブサイトのヘッダセクションにjQuery画像スライダを持っています。今問題は、最初にページをロードする（何もキャッシュされていない）ときに、スライダー内のすべてのイメージを一度に読み込み、イメージをもう一方のページの上に重ねてWebページ上に配置するときです）ので、ページが読み込まれた瞬間にすべての画像が表示されます。それは非常に専門的に見えません。 onpageload（）関数は、すべての画像が一度に表示されないようにするか、またはそれらを表示する前にバックグラウンドで最初に読み込むことができますか？これは特に低インターネット速度の問題です...私のウェブサイト：http://v4m.mobi jQuery画像スライダは一度にすべての画像を読み込みます

ありがとう！

出典

2012-01-23 DextrousDave

は、あなたのイメージdisplay:noneやvisibility:hiddenのスタイルを与え、その後、$(window).load()に戻っdisplay:[block/inline/etc]またはvisibility:visibleに自分のスタイルを変更します。

$(window).load(function(){ 
    $('#myImage1').css('visibility','visible'); 
    $('#myImage2').css('visibility','visible'); 
    //etc 
});

出典

2012-01-23 15:05:34

こんにちはDC_です。あなたの答えをありがとう、私は知っている、私はどのように可視性を適用する：document.ready（）関数で画像に表示されますか？ HTMLの画像は、javacript – DextrousDave

$（window）.loadの前に読み込まれているので、他の回答者が示唆しているように、おそらくこれは実際にはより良いでしょう。私はいくつかのサンプルコードで私の答えを編集しました。 –

@ DC_あなたのコードがうまくいきました！もう一つ追加したいと思います。多くの画像がある場合、各画像の可視性を変更する代わりに、画像そのものの親div/ul/containerの可視性を変更することができます。 – Sarvan

イメージをプリロードするか、jQueryを使用し、window.load（）でコードをロードします。

$(window).load(function(){ 
// runs after images are loaded 
});

出典

2012-01-23 16:10:10 j08691

あなたの答えをありがとう、私は上記のあなたのメソッドは、Ajaxを使用すると仮定？ – DextrousDave

実際には、そうではありません。 – j08691

$（window）.load（function（）{}）を試しました。しかし、それでも画像の最初のものが読み込まれます。最初に画像を含むhtmlテーブルをロードし、次にjqueryとcssをロードします。私はまた、次の（http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/）を試してみましたが、特に遅いインターネット速度では特に助けません。 – DextrousDave

あなたは、単に行うことができませんでした。

.slideshow img { 
    display: none; 
} 

.slideshow img:first-child { 
    display: block; 
}

彼らは一度、ブラウザに依存しますが、少なくとも一つだけが表示されますまたはしないことがあり、すべての負荷があります。さらに、最初の画像の非JavaScriptフォールバックが表示されます。

古いブラウザサポートが必要な場合は、「可視」クラスを作成して最初のイメージ要素に追加します。

出典

2012-07-04 12:03:03 martinedwards

jQuery画像スライダは一度にすべての画像を読み込みます

答えて

関連する問題