javascript - 画像ソースの遅延バインディング - その間に表示される冗長なエラー アイコンを取り除きます

Question

ページには img 宣言があります:

<img src="" alt="" itemid="7" />

この画像を適切なソース URL にバインドしたいと考えています。外部サービスから取得する必要があるこの URL:

$(document).ready(function () {
    var id = $(img).attr('itemid');
    getImageUrl(id);  // fetch the image source url, takes about 5 seconds
});

function getImageUrl(id) {
    $.ajax({
        url: 'http://images.service.svc/get?id=' + id,
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success:
            /* after about 5 seconds */
            function (result) {
                var imageUrl = result.ImageUrl;
                image.attr('src', imageUrl);
            }
    });
}

その間、IEではエラー画像が表示されます

ソースURLが画像にバインドされた後に画像を表示する方法、次にブラウザによってダウンロードされ、最終的に表示する準備ができましたか?

Answer 1

CSS で画像を設定しvisibility:hidden、JavaScript で属性が終了したら、CSS を次のように設定できます。visibility:visible

image.css('visibility','visible');