0
jQuery(document).ready(function() {
    jQuery('#submit').click(function() {    jQuery("#LoadingImage").show();
        jQuery('#imgRESULT').html('<img id="image1" src="http://johndoe.com/foo.php?username1=' + jQuery('input[name=username1]').val() + '&amp;username2='+ jQuery('input[name=username2]').val() +    '" >');
    });

$('#image1').on("load", function() {
    $("#LoadingImage").hide();
});});

事はロード画像divで、生成された画像が生成されたときに非表示になりません。

これを機能させる方法についてのアイデアはありますか?

4

1 に答える 1

3

イベントはバブリングしないため、ここではイベント委任loadを使用できません(動的に挿入される要素に関する標準的な提案は何でしょうか)。

したがって、ここでのベスト ショットは、新しく作成されたイメージ ノードに load イベントを直接配置することです。

jQuery('#imgRESULT').empty().append($('<img>', {
    id:    'image1',
    src:    'http://johndoe.com/foo.php?username1=' + jQuery('input[name=username1]').val() + '&amp;username2='+ jQuery('input[name=username2]').val(),
    load:   function() {
        $("#LoadingImage").hide();
    }
}));
于 2012-12-23T22:21:05.983 に答える