Удалить фоновое изображение при загрузке изображения

Question

Я загружаю теги изображений через AJAX и вставляю их с помощью обычной функции .html(content) в jQuery вместе с кучей других HTML.Однако этот вопрос все еще применяется, если вы загружаете страницу с нуля.Теперь у меня есть местозаполнитель фонового изображения, который нужно поместить туда, пока изображение загружается.Я хочу, чтобы это фоновое изображение исчезло при загрузке изображения.

Проблема:

Если я присоединяю обычный приемник событий .load(function), я обеспокоен тем, что изображение может загружаться до того, как перехватитсяприменяется (установка крюка в маленький JS <script> сразу после изображения вместо блока $(function(){}) может немного помочь).Мне еще не приходилось сталкиваться с таким поведением, но я ничего не знаю в спецификации, которая бы препятствовала этому (поскольку тег изображения должен быть полностью проанализирован до применения хука).

Мое текущее решение.Поместите команду во встроенное свойство onload= внутри тега изображения.

Есть ли лучший способ?

Answer 1

До недели или около того назад я тоже был бы потерян. К счастью этот ответ на другой вопрос поможет вам:

В основном это в $():

$(function(){ 
   var img = $("#idofimage").load(function () { 
      /* your magic to swap out placeholder */ 
   });

   if (img[0].complete) {
     // Trigger the load handler if the image
     // is already loaded
     img.trigger('load');
   }

});

Answer 2

Для этого вам не нужен jQuery, вы можете сделать это с помощью CSS.

.my-img-loader-class { background:url('placeholder-or-progress'); }

Или, если вы не хотите менять свой HTML:

#container img { background:url('placeholder-or-progress'); }

Отображение заполнителей во время загрузки изображений в определенном разделе.

То, как он работает, заключается в том, что элемент изображения будет показывать изображение заполнителя в качестве фона, а при загрузке src он будет отображаться над заполнителем, чтобы его было удобно заменить.