Как я могу узнать, когда загрузилось фоновое изображение CSS? Событие запущено? - PullRequest
Новая
       30

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

20 голосов
/ 09 июня 2011

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

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

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

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

Ответы [ 4 ]

22 голосов
/ 09 июня 2011

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

6 голосов
/ 09 июня 2011

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

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

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

РЕДАКТИРОВАТЬ: Ха, похоже, работает в 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 указывает на правильное изображение, и я думаю, что дальнейшая проверка ошибок не нужна, учитывая вопрос.

1 голос
/ 09 июня 2011

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

0 голосов
/ 26 марта 2019

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

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

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

...