JQuery - установить фоновое изображение для объекта изображения

Question

Я новичок в JQuery и пытаюсь сделать с ним подтверждение концепции. Я пытаюсь использовать JQuery для: 1) загрузки большого (> 500 КБ) файла изображения; 2) установки изображения в качестве фона элемента при загрузке; 3) его постепенного увеличения (в основном так, как это делает Bing.com). Сообщество StackOverflow щедро помогло мне в решении этой проблемы, как показано здесь . Тем не менее, у меня все еще есть одна проблема, которую я не могу понять.

Как сделать загруженное изображение фоновым изображением HTML-элемента? Код, который я вижу на http://jqueryfordesigners.com/image-loading/, добавляет элемент изображения в DIV. Тем не менее, я хочу установить изображение в качестве фонового изображения DIV после загрузки и затемнить его. Возможно ли это? Я, кажется, продолжаю ходить кругами по этому вопросу. Спасибо.

Answer 1

Поместите дополнительный div (с width: 100%; height: 100%) в #loader: <div id="loader"><div class="image"></div></div>.

Тогда вместо $("#loader").append(this); вам нужно что-то вроде $("#loader div.image").css("background","url(images/headshot.jpg) no-repeat 0 0");. Таким образом, элемент img останется невидимым за пределами дерева документа, но фон - как мы надеемся, кэшируется, по крайней мере, большинство браузеров - будет отображаться в вашем div.

Затем, наконец, примените эффекты к своему внутреннему div с помощью .fadeIn().

Сам не пробовал, но должно быть что-то вроде этого.

Answer 2

Как я сказал в своем ответе на этот вопрос. После загрузки он находится в кеше, поэтому он не будет загружен во второй раз.

Answer 3

На самом деле все, что вам нужно сделать, это что-то вроде

$("#myDiv").css({background-image: "url('http://someserver.com/someImage.jpg')"})

Вы можете полностью пропустить часть «загрузка», так как браузер позаботится об этом.

Answer 4

Предполагается, что вы используете браузер для загрузки изображения, когда оно у вас есть, оно находится в кеше браузера. Установка фонового изображения DIV в URL-адрес изображения не должна загружать его второй раз, а просто загрузить его из кэша. Затем вы можете отказаться от объекта изображения.

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