загрузка изображения перед переключением фона div в jquery

Question

У меня есть веб-страница, на которой я хочу переключить фоновое изображение div в ответ на взаимодействие с пользователем. То, что у меня пока есть:

function updateImg() { 
   imgurl=buildImgURL(); // constructs a URL based on various form values
   $('#mainImage').css("background-image", "url("+imgurl+")");
}

Это работает точно так, как я хочу, за исключением одной вещи. Из-за сочетания относительно больших фоновых изображений и относительно медленного сервера (ни один из которых не может быть легко исправлен) загрузка изображения занимает некоторое время. Поэтому, когда вызывается функция updateImg (), div становится белым за полсекунды или около того, прежде чем загружается новое фоновое изображение. Я хочу, чтобы старое фоновое изображение оставалось до завершения загрузки нового изображения, а затем мгновенно переключалось. Возможно ли это сделать?

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

Answer 1

Как насчет установки изображения в пустой элемент?

$("<img id='loaderImg' src='"+imgUrl+"' onload='setBg(this.src)'/>");

Затем, когда изображение загружено

function setBg(imgUrl) {
    $("#mainImage").css("background-image", "url("+imgUrl+")");
    $("#loaderImg").remove();
}

Таким образом, изображение будет загружено в изображение, которое никогда не будет отображаться, и будет установлено на фон, когда изображение полностью загружено (и также кэшировано)

Не проверял это, но я думаю, что это должно работать.

Answer 2

Так как вы не можете предварительно загрузить свое изображение, вы можете сделать это:

1. предварительно загрузить изображение "loading .."
2. установить изображение "loading .." в качестве фона для вашего div, пока ваше фактическое изображение готовится
3. как только ваше действительное изображение станет доступным, сделайте свое дело.

Пожалуйста, не просите меня написать для него jQuery. Это достаточно просто:)

Приветствия

JRH.

Answer 3

Вы можете определить класс CSS, установив для свойства background-image значение image, а затем в своей функции updateImg () установить класс этого div вместо прямой модификации свойства. Это может облегчить проблему.

Что-то вроде:

function updateImg() { 
  imgurl=buildImgURL(); // constructs a URL based on various form values
  $('#mainImage').addClass('imageClassName');
}

А потом в вашем CSS:

.imageClassName {
  background-image: url([url to image]);
}