1

私はスーパーサイズのスライダーを使用しています..

私は問題に直面しています...

画像のサイズが大きく、読み込みに時間がかかる場合、完全に読み込まれる前に、スライダーが新しい画像に変更されます..

1枚の画像が完全にダウンロードされ、その後スライダーが遷移するような機能を追加したい..

誰かがこの種の問題で私を助けることができますか??

EDIT

前の画像が完全にダウンロードされたときに、スライドトランジションがしたい..

a.jpg、b.jpg、c.jpgの3つの画像があるとします

a.jpg が b.jpg に移行し、

b.jpg は非常に大きなファイルです。b.jpg が完全にダウンロードされない限り、c.jpg に移行することはありません ......

そのため、画像が完全にダウンロードされるまで、各画像ごとに遷移が停止する可能性があります......

4

2 に答える 2

0

document完全にロードされた後、スライダーを初期化します。

$(window).load(function(){
   //slider initialization.
});

今すぐhtmlで以下のようにしてください。

<div id="slider">
    <ul>
        <li><img src="loading.jpg" alt="" id="slider_loading"/></li>
        <li><img src="1.jpg" alt="" /></li>
        <li><img src="2.jpg" alt="" /></li>
        <li><img src="3.jpg" alt="" /></li>
    </ul>
</div>

slider divここで、魔女の内部のcss を作成しdislpay:none;て、すべての画像にルールを追加します。

CSS

#slider ul li img
{
    display:none;
}

#slider_loading
{
    display:block !important;
}

slider initializationコードの前に、以下のようにその読み込みイメージを削除します。

$(window).load(function()
{
    $("#slider_loading").remove();
   //slider initialization.
});

これで完了です。

于 2013-02-23T08:22:30.063 に答える
0

画像をプリロードしたい。

この関数は画像をロードし、コンテナに追加します:

function preloadImages() {
    for(var i = 0; i < arguments.length; i++) {
        $('<img />').attr('src', arguments[i]).appendTo('#myImages');
    }
}

ドキュメントの準備ができたら、その関数を呼び出します。

$(function() {
    preloadImages('a.jpg', 'b.jpg');
    $('#myImages').show();
});

あなたのHTMLには次のものがあります：

<div id="myImages" style="display:none"></div>
于 2013-02-23T08:41:20.143 に答える