[javascript] Как проверить, загружено ли фоновое изображение?



Answers

У меня есть плагин jQuery под названием waitForImages который может обнаруживать, когда загружены фоновые изображения.

$('body')
  .css('background-image','url(http://picture.de/image.png)')
  .waitForImages(function() {
    alert('Background image done loading');
    // This *does* work
  }, $.noop, true);
Question

Я хочу установить фоновое изображение на теге body, затем запустить некоторый код - вот так:

$('body').css('background-image','http://picture.de/image.png').load(function() {
    alert('Background image done loading');
    // This doesn't work
});

Как я могу убедиться, что фоновое изображение полностью загружено?




Не существует JS-обратных вызовов для активов CSS.







Я нашел решение, которое работало лучше для меня, и которое имеет то преимущество, что оно можно использовать с несколькими изображениями (случай, не проиллюстрированный в этом примере).

Из ответа @ adeneo на этот вопрос :

Если у вас есть элемент с фоновым изображением, например

<div id="test" style="background-image: url(link/to/image.png)"><div>

Вы можете дождаться загрузки фона, получив URL-адрес изображения и используя его для объекта изображения в javascript с обработчиком onload

var src = $('#test').css('background-image');
var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');

var img = new Image();
img.onload = function() {
    alert('image loaded');
}
img.src = url;
if (img.complete) img.onload();



Links