Как я могу асинхронно загружать изображение на загрузку страницы и отображать загружаемый 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(); 
});