Загрузка изображений перед циклом их в качестве фона div? - PullRequest
Новая
       25

Загрузка изображений перед циклом их в качестве фона div?

0 голосов
/ 29 ноября 2010

У меня есть стандартная веб-страница, разработанная на php с использованием CSS, и в настоящее время немного javascript для циклического перемещения по некоторым изображениям для div предложения.Вы можете увидеть сайт здесь , это не будет последнее место отдыха, это временный сайт.Если вы посмотрите на баннер предложений.Когда он переключается на следующее изображение, он становится белым, в то время как он загружает следующее изображение.Есть ли способ загрузить следующее изображение перед его применением к свойству div background?Вот мой javascript atm. 

var c=0
var s
function offersCycle()
{
  if (c%3==0){
  document.getElementById('offers').style.background = "url(/images/1.jpg)";
}
if (c%3==1){
  document.getElementById('offers').style.background = "url(/images/2.jpg)";
}
if (c%3==2){
  document.getElementById('offers').style.background = "url(/images/3.jpg)";
}
c=c+1
s=setTimeout("offersCycle()",8000)

Я попытался использовать набор новых изображений в javascript и определить их перед циклированием, но они не будут применяться к CSS, поскольку это зависит от URL, а несамо изображение?Любые идеи приветствуются.Ура, Иордания

Ответы [ 2 ]

1 голос
/ 29 ноября 2010

Я бы сделал что-то вроде этого: 

var c = 0, images = ["/images/1.jpg", "/images/2.jpg", "/images/3.jpg"];
for(var i=0; i<images.length; i++) {
  var img = new Image();
  img.src = images[i];
}
function offersCycle() {
  document.getElementById('offers').style.background = "url("+images[c%images.length]+")";
  c++;
}
var s = setTimeout(offersCycle, 8000);

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

0 голосов
/ 29 ноября 2010

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

Подробности здесь: https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

...