如何在頁面加載時異步加載圖像並在加載時顯示加載gif？

Question

這是我的圖片標簽。 圖像是從數據庫動態生成的圖。 涉及的數據量可能相差很大。 有時，它在不到一秒鍾的時間內加載，而在其他時候，它最多可能需要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();
});