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

Ответ 1

попробуйте следующее:

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks as @benweet suggested
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

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

Ответ 2

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

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

Ответ 3

Что-то вроде этого:

var $div = $('div'),
  bg = $div.css('background-image');
  if (bg) {
    var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''),
      $img = $('<img>').attr('src', src).on('load', function() {
        // do something, maybe:
        $div.fadeIn();
      });
  }
});

Ответ 4

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

Ответ 5

Вот небольшой плагин, который я сделал, чтобы вы могли сделать именно это, он также работает с несколькими фоновыми изображениями и несколькими элементами:

Прочтите статью:

http://catmull.uk/code-lab/background-image-loaded/

или перейдите прямо к коду плагина:

http://catmull.uk/downloads/bg-loaded/bg-loaded.js

Так просто включите плагин, а затем вызовите его по элементу:

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
   $('body').bgLoaded();
</script>

Очевидно, загрузите плагин и сохраните его на своем собственном хостинге.

По умолчанию он добавляет дополнительный класс "bg-loaded" к каждому согласованному элементу после загрузки фона, но вы можете легко изменить его, передав ему другую функцию, подобную этой:

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
   $('body').bgLoaded({
      afterLoaded : function() {
         alert('Background image done loading');
      }
   });
</script>

Вот код, демонстрирующий, что он работает.

http://codepen.io/catmull/pen/Lfcpb

Ответ 6

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

От @adeneo ответьте на этот вопрос:

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

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

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

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();

Ответ 7

https://github.com/alexanderdickson/waitForImages

$('selector').waitForImages({
    finished: function() {
       // ...
    },
    each: function() {
       // ...
    },
    waitForAll: true
});

Ответ 8

Я сделал чистый javascript-хак, чтобы сделать это возможным.

<div class="my_background_image" style="background-image: url(broken-image.jpg)">
<img class="image_error" src="broken-image.jpg" onerror="this.parentElement.style.display='none';">
</div>

или

onerror="this.parentElement.backgroundImage = "url('image_placeHolder.png')";

CSS

.image_error {
    display: none;
}

Ответ 9

Чистое решение JS, которое добавит preloader, установит background-image и затем настроит его для сборки мусора вместе с слушателем событий:

const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let bgElement = document.querySelector("body");
bgElement.classList.add("loading");
let preloaderImg = document.createElement("img");
preloaderImg.src = imageUrl;

preloaderImg.addEventListener('load', (event) => {
  bgElement.classList.remove("loading");
  bgElement.classList.add("loaded");
  bgElement.style.backgroundImage = 'url(${imageUrl})';
  preloaderImg = null;
});

.loading {
  opacity: 0;
  transition: opacity .4s ease-out;
}

.loaded {
  opacity: 1;
}