Question

伙计我已经实现了横幅图库，如下所述：

<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/

我需要的是，如果我点击第一张或第三张图像，我需要在第二张图像上添加一张加载图像，直到它加载新图像为止。

请帮帮我..

Answer 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（）函数以验证是否已调用回调。

单击[Jquery]如何在另一个图像上添加加载图像

1 个答案: