立即下载更改背景图像 [英] Download changing background images immediately

问题描述

 < div id =我创建了网站，并更改了背景图片。 templatemo_header> 
< / div> 
  

CSS：

  #templatemo_header {
 background：url（images / templatemo_header.jpg）no-repeat; 
} 
  

和每个3秒改变BG图像的JS代码

  function displayImage（image）{
 document.getElementById（templatemo_header）。style.backgroundImage = image; 
} 
 
 function displayNextImage（）{
 x =（x == images.length  -  1）？ 0：x + 1; 
 displayImage（images [x]）; 
} 
 
函数displayPreviousImage（）{
 x =（x <= 0）？ images.length  -  1：x  -  1; 
 displayImage（images [x]）; 
} 
 
函数startTimer（）{
 setInterval（displayNextImage，3000）; 
} 
 
 var images = []，x = -1; 
 images [0] ='url（images / templatemo_header1.jpg）'; 
 images [1] ='url（images / templatemo_header2.jpg）'; 
 images [2] ='url（images / templatemo_header3.jpg）'; 
 images [3] ='url（images / templatemo_header.jpg）'; 
  

问题在于每个BG图像仅在第一次改变时，图像消失并在一段时间后出现新图像出现。

我想，这是因为新的BG图像被下载。

是否有办法强制立即下载图像，在函数startTimer中说？

提前致谢。

解决方案

有几种方法可以使用JavaScript预加载图片这里。通过预加载图像，您可能在显示图像时运气更好。在你的情况下，如果可能的话，我会使用方法3，如果不是方法2。如文章中所述，您可以使用window.onload事件来启动页面加载后下载图像。

我会设置你的图像数组，如下所示：

  window.onload = preLoadImages（） ; 
 
函数preLoadImages（）{
 preLoadImage = new Image（）; 
 
 images [0] =images / templatemo_header1.jpg; 
 images [1] =images / templatemo_header2.jpg; 
 images [2] =images / templatemo_header3.jpg; 
 images [3] =images / templatemo_header.jpg; 
 
 for（i = 0，i <= images.length，i ++）{
 preLoadImage.src = images [i]; 
} 
} 
  

I created site with changing background images.
HTML:

<div id="templatemo_header">
</div>

CSS:

#templatemo_header {
    background: url(images/templatemo_header.jpg) no-repeat;
}

And JS code which changes the BG image each 3 seconds

function displayImage(image) {
    document.getElementById("templatemo_header").style.backgroundImage = image;
}

function displayNextImage() {
    x = (x == images.length - 1) ? 0 : x + 1;
    displayImage(images[x]);           
}

function displayPreviousImage() {
    x = (x <= 0) ? images.length - 1 : x - 1;
    displayImage(images[x]);           
}

function startTimer() {
    setInterval(displayNextImage, 3000);
}

var images = [], x = -1;
images[0] = 'url("images/templatemo_header1.jpg")';
images[1] = 'url("images/templatemo_header2.jpg")';
images[2] = 'url("images/templatemo_header3.jpg")';
images[3] = 'url("images/templatemo_header.jpg")';

The problem is when each of BG images changed only first time, image dissapeares and after some moment new image appears.
I guess, it's because new BG image is downloaded.
Is it some way to force download the images immediately, say in function startTimer?
Thanks in advance.

解决方案

There are a few ways to pre-load images using javascript here. By pre-loading the images you may have better luck when displaying them. In your case I would use Method 3 if possible, if not Method 2. As described in the article, you would use the window.onload event to kick off the downloading of the images once the page has loaded.

I would just setup your image array as follows:

window.onload = preLoadImages();

function preLoadImages(){
    preLoadImage = new Image();

    images[0] = "images/templatemo_header1.jpg";
    images[1] = "images/templatemo_header2.jpg";
    images[2] = "images/templatemo_header3.jpg";
    images[3] = "images/templatemo_header.jpg";

    for(i=0, i<=images.length, i++){
        preLoadImage.src=images[i];
    }
}

这篇关于立即下载更改背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！