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

Question

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

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

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

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

.load-bg ~ фоновая загрузка ~ показать элемент ..

Достигну ли я луны или это выполнимо?

Answer 1

Мой плагин, waitForImages , позволяет прикреплять обратные вызовы при загрузке изображений.

Поддерживаются изображения, на которые есть ссылки в CSS.

$('#some-container').waitForImages({
    waitForAll: true,
    finished: function() {
        // Loaded all images referenced in CSS.
    }
});

Answer 2

Вы можете использовать асинхронный загрузчик изображений с обратным вызовом события, которое показывает элементы div, содержащие изображения. Вот некоторые асинхронные загрузчики:

• JAIL (jQuery Asynchronous Image Loader)
• Плагин для загрузки изображений JQuery
  • Примечание. См. Событие allcomplete на этой странице.

Кроме того, SO q / a, который может быть полезен: Предварительная загрузка изображений с помощью jQuery

Answer 3

Я могу подтвердить, что плагин ' ImagesLoaded ' работает для меня.

Используйте вот так:

// jQuery
$('#container').imagesLoaded( { background: true }, function() {
  console.log('#container background image loaded');
});

// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
  console.log('#container background image loaded');
});