0

みんな次のようにバナーギャラリーを実装しました：

<div class="Container">
                <div class="Gallery">
                    <div class="GaleryLeftPanel">
                        <img id="img1" src="http://test-audioplanet.lumos.in.green.mysitehosted.com/Content/Public/images/1.png" style="z-index: 100" width="141"
                            height="140" alt="image 1" /></div>
                    <div class="GalleryMiddlePanel">
                        <img id="img2" src="http://test-audioplanet.lumos.in.green.mysitehosted.com/Content/Public/images/2.png" style="z-index: 99" width="141"
                            height="140" alt="image 2" /></div>
                    <div class="GaleryRightPanel">
                        <img id="img3" src="http://test-audioplanet.lumos.in.green.mysitehosted.com/Content/Public/images/3.png" style="z-index: 98" width="140"
                            height="140" alt="image 3" /></div>
                </div>
            </div>


$('img#img1').click(function () {
        var currentScr = $(this).attr('src');
        var second = $('img#img2').attr('src');
        var third = $('img#img3').attr('src');

        $('img#img3').attr('src', (second.indexOf("L") >= 0) ? second.replace('1L', '1').replace('2L', '2').replace('3L', '3') : second);
        $('img#img2').attr('src', currentScr.replace('1', '1L').replace('2', '2L').replace('3', '3L'));
        $('img#img1').attr('src', third);
    });

    $('img#img3').click(function () {
        var third = $(this).attr('src');
        var first = $('img#img1').attr('src');
        var second = $('img#img2').attr('src');

        $('img#img2').attr('src', third.replace('1', '1L').replace('2', '2L').replace('3', '3L'));
        $('img#img3').attr('src', first);
        $('img#img1').attr('src', (second.indexOf("L") >= 0) ? second.replace('1L', '1').replace('2L', '2').replace('3L', '3') : second);
});

次のフィドルでアクションを確認できます。

http://jsfiddle.net/6HHkT/6/

私が必要としているのは、最初または 3 番目の画像をクリックした場合、新しい画像が読み込まれるまで、読み込み中の画像を 2 番目の画像の上に追加する必要があるということです。

私を助けてください..

4

1 に答える 1

1

アイデアは、中間の画像に読み込みレイヤーを追加することです。このレイヤーに背景画像を追加するには、通常、不透明度 0.5 の白色の bkg とローディング ホイールを使用します。

次に、イベントを登録して、新しい画像が読み込まれたイベントをキャッチします。このイベントをデモの最初の画像に追加しました。

$('img#img2').addClass('loading');

//Append image load callback            
$('img#img1').on('load',function() {
    $('img#img2').removeClass('loading');
    //alert ("The image has loaded!");        
});

フィドルが完全に適応されていない: http://jsfiddle.net/6HHkT/12/

すべての画像がブラウザーのキャッシュに既に読み込まれているため、読み込みレイヤーの動作は表示されません。alert() 関数のコメントを外して、コールバックが呼び出されたことを確認します。

于 2012-11-28T09:21:04.483 に答える