javascript - ページの読み込み時に画像を非同期に読み込み、読み込み中に読み込み中の gif を表示するにはどうすればよいですか?

Question

これが私のイメージタグです。画像はデータベースから動的に生成されるグラフです。関連するデータの量は、大きく異なる場合があります。1 秒未満でロードされる場合もあれば、グラフ イメージが返されて表示されるまでに最大 6 秒または 7 秒かかる場合もあります。私がやりたいのは、実際の画像が読み込まれるまで、単純なプレースホルダー gif を表示することです。

<img src="@Url.Action("Graph", new { id =  Model.ID })" alt="Graph is Loading..." />

Answer 1

ASP を完全に無視して、ローダーをソースとして、実際の画像をデータ属性として要素を追加し、JavaScript で画像を読み込み、実際の画像が読み込まれたら画像を交換できます。

<img src="loader.gif" data-src="/images/menubar.png" />

JS プリロード

$('img').each(function() {
    var self = this,
        src  = $(self).data('src'), // get the data attribute
        img  = new Image();         // create a new image

    img.onload = function() {       // onload
        self.src = this.src;        // swap the source
    }

    img.src = src;                  // set source of new image

    if (this.complete) $(this).load();
});