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

画像にフェードインし、読み込み中のメッセージ/画像を非表示にするオンロード リスナーを追加します。

また、現在の画像をフェードアウトし、読み込みメッセージ/画像を表示し、画像ソースを変更するオンクリック リスナーも追加します。

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 に答える
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 に答える