У меня есть виджет боковой панели с фоном изображения.
В этом случае используется форма поиска. Я не хочу, чтобы входные данные отображались до загрузки изображения.
Есть ли способ привязать обработчик события load к фонового изображения CSS, как обычные элементы/объекты img?
Я знаю, что это можно сделать на обычном изображении, но я хотел бы сохранить его как фон CSS, потому что изображение является частью спрайта. Я использую jQuery, поэтому решения, использующие jQuery или простой DOM JS, одинаково хороши.
Вы можете загрузить одно и то же изображение с помощью скрытого изображения DOM/и связать с ним событие load. Кэширование браузера должно заботиться о том, чтобы не загружать изображение дважды, и если изображение уже загружено, событие должно немедленно срабатывать... не проверено, жестко.
В chrome использование jQuery.ready() jQuery для меня работает. Здесь моя скрипка:
Изображение просто случайное, которое я выбрал достаточно разумным - на некоторых моих тестах требуется очень много времени, поэтому стоит заменить немного чем-то меньшим. Но конечный результат - это то, что вы хотите, я думаю: для загрузки требуется некоторое время, и как только он загружает предупреждение, а затем выводит текстовое поле (#txt). Кажется, тоже работает в Firefox; не уверены в других браузерах.
EDIT: Ха, похоже, работает в Chrome, Firefox и Safari. Не работает в IE8. Итак... он работает во всех реальных браузерах:)
EDIT2: После многократной игры комбинация Allesandro и моего собственного решения, похоже, работает. Я использую .ready() на скрытом img, чтобы определить, когда изображение загружено, а затем загрузите его в фон CSS.
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 указывает на действительное изображение, и я думаю, что дальнейшая проверка ошибок на самом деле не нужна, учитывая вопрос.
не устанавливайте фон в css, но загружайте изображение в тег img, созданный с помощью javascript (или лучше, jquery). после загрузки он будет запускать событие загрузки. когда это событие запущено, примените свойство style к вашему div
Вы можете попробовать это, это довольно просто.
function onImageLoaded(url, callback) {
const img = new Image();
img.src = url;
img.onloadend = callback; //Image has loaded or failed
return;
}
Это будет работать для фоновых изображений и тегов img.