Установка фонового изображения div с использованием изображения var? - PullRequest
Новая
       4

Установка фонового изображения div с использованием изображения var?

0 голосов
/ 23 февраля 2012

Может кто-нибудь подсказать, как мне это сделать:
Используя переменную изображения, я хочу установить фон div, хотя не использую источник / URL изображения. Например, это не работает: 

var img = new Image();
img.onload = function() {
   $('#div').css("background-image", img);
}
img.src = "http://example.com/image.jpg";

По сути, я пытаюсь установить ширину / высоту фонового изображения, чтобы оно хорошо вписывалось в div. Я полагал, что использование переменной изображения было единственным способом, но если это не так, пожалуйста, предложите, как я могу это сделать. Спасибо за помощь! :)

Ответы [ 4 ]

3 голосов
/ 23 февраля 2012

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

var src = 'http://example.com/image.jpg';

$('#div').css('background-image', 'url(' + src + ')');

Не забудьте добавить в бит URL;)

Надеюсь, это поможет:)

Редактировать

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

var src = 'http://example.com/image.jpg';

$('<img/>').load(function(){

    $('#div').css('background-image', 'url(' + src + ')');

}).attr("src",src);

Это должно сработать.

2 голосов
/ 23 февраля 2012

Попробуйте это: 

var img = new Image();
img.onload = function() {
   $('#div').css("background-image", "url(" + img.src + ")");
}
img.src = "http://example.com/image.jpg";

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

var img = new Image();
function imgLoaded() {
  $('#div').css("background-image", "url(" + img.src + ")");
}
img.onload = imgLoaded;
img.src = "http://example.com/image.jpg";
if (img.complete || img.readystate === 4) {
  imgLoaded();
}
1 голос
/ 23 февраля 2012

Что вы можете сделать, это создать абсолютно позиционированный img, а затем с помощью атрибутов изображения установить ширину и высоту.Абсолютно позиционируя его, вы можете отобразить его за другим контентом.

Попробуйте и, если у вас возникли проблемы с ним, предоставьте фрагмент кода, и я могу помочь вам получить правильные HTML и CSS.1003 *

1 голос
/ 23 февраля 2012

вы не можете установить ширину / высоту фонового изображения.Единственный способ сделать это - использовать свойство background-size в CSS3 или использовать абсолютно позиционированное изображение за содержимым div.

...