0

我在这里搜索了很多问题，但我仍然没有找到正确的解决方案。

我有一个代码可以src在点击时更改图像属性。我需要的是在加载更改的源时显示加载器，当它加载时，我希望图像淡入。那可能吗？

我尝试了什么：

$('#loader').show();

var link='http://www.linktoimage.com/image.jpg';

$('#button').on('click',function(){

    $("#img").attr('src', link).load(function() {

        $(this).fadeIn(300);
        $('#loader').hide();

    });

});

这当然行不通。如果您知道任何优雅的解决方案，请告诉。

4

2 回答 2

1

如果先隐藏img元素，可以达到想要的效果：

看看这个jsfiddle

http://jsfiddle.net/enrique_alcantara/zXbW3/

<button id="button">Cargar</button>
<img id="loader" src="http://www.deadmau5.com/wp-content/themes/deadmau5/images/ajax-loader.gif" width="50" height="50" />
<img id="img" />

JS

var link='http://static.comicvine.com/uploads/original/11111/111117347/3150345-8768287685-the-av.jpeg';

$('#button').on('click',function(){

    $("#img").css('display', 'none').load(function() {
        $("#img").fadeIn(300);
        $('#loader').hide();

    }).attr('src', link);

});
于 2013-09-17T01:45:09.523 回答
1

添加一个加载时侦听器，它将淡入图像并隐藏加载消息/图像。

我们还添加了一个点击监听器，它将淡出当前图像，显示加载消息/图像并更改图像源。

HTML

<button id="Button">Change image</button>
<img src="http://lorempixel.com/200/100/" alt="" id="Image" />
<div id="Loader">Loading...</div>

Javascript

$('#Image').on('load', function() {
    $('#Loader').fadeOut(200, function() {
        $('#Image').fadeIn(200);
    });
});
$('#Button').on('click', function() {
    $('#Image').fadeOut(200, function() {
        $('#Loader').show();
    });
    $('#Image').attr('src', 'http://lorempixel.com/200/100/');
});

演示

于 2013-09-17T01:54:21.060 回答