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/

我需要的是，如果我单击第一个或第三个图像，我需要在第二个图像的顶部添加一个加载图像，直到它加载新图像。

请帮我..

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 回答