Способов узнать ДИВО фоновое изображение загружается

Question

я думал о том, где же разница заключается, когда я пытаюсь сделать следующие два различными способами, а не с точки зрения использования, но производительность мудрой влияет:

• Использование тега изображения

  <img src='http://lorempixel.com/300/300/sports/2/'> 
  

  наряду с, скажем,

  img{ 
      width: 100px; 
      height: 100px; 
  } 
  

• Использование DIV тег

  <div class='test'></div> 
  

  наряду с, скажем,

  .test{ 
      background-image: url('http://lorempixel.com/300/300/sports/2/'); 
      width: 100px; 
      height: 100px; 
  } 
  

Сказав, что я хотел бы знать, когда изображение становится загружен в обоих случаях. Для первого, это довольно простое использование события загрузки. Но для второго, div-case, как я должен проверять? .. Я знаю об этом OverHead, но не означает ли это, что это навлечет накладные расходы, создавая Image отдельно для каждого div?

Есть ли другие способы достижения такого же?

Answer 1

Добавить прослушиватель событий для onload event.

Атрибут onload срабатывает, когда объект был загружен.

onload чаще всего используется внутри элемента для выполнения сценария после того, как веб-страница полностью загрузила весь контент (включая изображений, файлов сценариев, файлов CSS и т. Д.). Однако его можно использовать и на других элементах: .

Итак, как вы можете применить это для 2-х корпусов?

$('<img/>').attr('src', 'IMAGE_SOURCE_LINK').load(function() { 
    $(this).remove(); 
    $('element').css('background-image', 'url('IMAGE_SOURCE_LINK')'); 
}); 

Выше кодов показывает только то, что я имею в виду. Браузер не перезагрузит изображение, потому что он остается в памяти браузера, и браузер загружает их только один раз.