Подтвердить что ты не робот

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

У меня есть виджет боковой панели с фоном изображения.

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

Есть ли способ привязать обработчик события load к фонового изображения CSS, как обычные элементы/объекты img?

Я знаю, что это можно сделать на обычном изображении, но я хотел бы сохранить его как фон CSS, потому что изображение является частью спрайта. Я использую jQuery, поэтому решения, использующие jQuery или простой DOM JS, одинаково хороши.

Ответ 1

Вы можете загрузить одно и то же изображение с помощью скрытого изображения DOM/и связать с ним событие load. Кэширование браузера должно заботиться о том, чтобы не загружать изображение дважды, и если изображение уже загружено, событие должно немедленно срабатывать... не проверено, жестко.

Ответ 2

В chrome использование jQuery.ready() jQuery для меня работает. Здесь моя скрипка:

http://jsfiddle.net/pWjBM/5/

Изображение просто случайное, которое я выбрал достаточно разумным - на некоторых моих тестах требуется очень много времени, поэтому стоит заменить немного чем-то меньшим. Но конечный результат - это то, что вы хотите, я думаю: для загрузки требуется некоторое время, и как только он загружает предупреждение, а затем выводит текстовое поле (#txt). Кажется, тоже работает в Firefox; не уверены в других браузерах.

EDIT: Ха, похоже, работает в Chrome, Firefox и Safari. Не работает в IE8. Итак... он работает во всех реальных браузерах:)

EDIT2: После многократной игры комбинация Allesandro и моего собственного решения, похоже, работает. Я использую .ready() на скрытом img, чтобы определить, когда изображение загружено, а затем загрузите его в фон CSS.

http://jsfiddle.net/pWjBM/41/

HTML:

<div id="testdiv">
    <input type="text" id="txt" style="display:none;" />
</div>
<img src="http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg" id="dummy" style="display:none;" alt="" />

JavaScript:

$(function() {
    $('#dummy').ready(function() { 
        alert('loaded');
        $('#testdiv').css('background-image', 'url(http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg)');
        $('#txt').show(1000);
    });
 });

CSS

#testdiv {
    background:#aaaaaa none no-repeat right top;
    width: 400px;
    height: 400px;
}

#txt{
    margin-left: 180px;
    margin-top: 140px;
}

ПРИМЕЧАНИЕ. Ниже приведен комментарий о том, что это не работает, потому что вы можете изменить URL-адрес изображения и по-прежнему запускать загруженное событие. Это фактически работает в значительной степени точно так, как я ожидал, учитывая текущий код - он не проверяет, действительно ли URL, на который вы указываете свой "образ", и действительно изображение, все, что он делает, запускает событие когда img готов и изменит фон. Предположение в коде состоит в том, что ваш URL указывает на действительное изображение, и я думаю, что дальнейшая проверка ошибок на самом деле не нужна, учитывая вопрос.

Ответ 3

не устанавливайте фон в css, но загружайте изображение в тег img, созданный с помощью javascript (или лучше, jquery). после загрузки он будет запускать событие загрузки. когда это событие запущено, примените свойство style к вашему div

Ответ 4

Вы можете попробовать это, это довольно просто.

function onImageLoaded(url, callback) {
    const img = new Image();
    img.src = url;
    img.onloadend = callback;   //Image has loaded or failed
    return;
}

Это будет работать для фоновых изображений и тегов img.