Question

我在这里搜索了很多问题，但我仍然找不到合适的解决方案。

我有一个代码可以在点击时更改图片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();

    });

});

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

Answer 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);

});

Answer 2

添加一个on load listener，它将淡入图像并隐藏加载消息/图像。

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

<强> 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/');
});

<强> Demo

jQuery：加载属性更改时的fadeIn图像

2 个答案: