Change background with a loop without flashing

Question

I am trying to make a changing background. So what I am trying to do is using SetInterval to change my background but whenever it changes, it leaves a white background and then turn to the image like I intend. Any advices on how to fix it?

My code:

var image = new Array();
image.push("url('./1.png')");
image.push("url('./2.png')");
image.push("url('./3.png')");
image.push("url('./4.png')");
image.push("url('./5.png')");

var imagenum = 0;

function changeBackground () {
    imagenum++;
    if (imagenum==5) {
         imagenum = 0;
    }
    document.getElementById("bodydiv").style.backgroundImage = image[imagenum];
}

function init () {
     setInterval(function () {changeBackground()},1000);
}

Bonus: If I set the setInterval a little bit lower, I will have the whole blank site. It works perfectly due to the code, but the flash really irritates me. Can anyone help me with it?

@t.niese I'm running on localhost only and it still have the flash thing. Is it possible to do the preload and fix it? If it is, how can I do it ? — Tree Nguyen, Dec 28 '14 at 14:10
preload images. http://stackoverflow.com/questions/3646036/javascript-preloading-images — Tracholar Zuo, Dec 28 '14 at 14:10
Even if you load your images on localhost they need to be requested. If the redraw thread is active before the request finishes you have a short flickering. — t.niese, Dec 28 '14 at 14:13
You should take a look at e.g.: [The definitive best way to preload images using JavaScript/jQuery?](http://stackoverflow.com/questions/901677/the-definitive-best-way-to-preload-images-using-javascript-jquery) The answer you accepted was wrong at the time you accepted it (as it loaded only the last image) and is currently is not correct either. — t.niese, Dec 28 '14 at 16:03
@t.niese can you explain why the answer is not correct? I check the other site and find the same way as here. — Tree Nguyen, Dec 29 '14 at 07:28
In the original answer there was `('./1.png', './2.png', ...)` instead of `['./1.png', './2.png', ...]` (see my comment to the answer). Now it is `['./1.png', './2.png', ...]`, but `arguments.length` will then still not work. And currently there is a `foreach` in the answer which is a syntax error. — t.niese, Dec 29 '14 at 09:10

James Stott · Accepted Answer · 2014-12-28T15:56:47.997

0

I placed the init() function in the preloadImages() one because it forces init() to only ever run when all images are preloaded. There are other ways to do this however.

var images = new Array();

function preloadImages() {
    i=1
    foreach(preloadImages.arguments as img)
        images[i] = new Image()
        images[i].src = img
        i++
    }
    init()
}

function changeBackground () {
    imagenum++;
    if (imagenum==5) {
        imagenum = 0;
    }
    document.getElementById("bodydiv").style.backgroundImage = image[imagenum];
}

function init () {
     setInterval(function () {changeBackground()},1000);
}

var image = [
    './1.png',
    './2.png',
    './3.png',
    './4.png',
    './5.png'
]

preloadImages(image);

edited Dec 28 '14 at 15:56

answered Dec 28 '14 at 14:15

James Stott

2,954
2
14
15

Hi. Thanks for answering my question. 1.However, I still dont get the image.arguments.length and image.arguments. 2. What is the very first function call? (preloadImages?) 3. After you create that image Array. What is exactly in the array? Image? or Link? If image, how to use it? – Tree Nguyen Dec 28 '14 at 14:22
@TreeNguyen I removed some unnecessary stuff vis-a-vis making sure the DOM is ready before having the code run. Now it should be clearer. Yes, `preloadImages(image)` is called first. – James Stott Dec 28 '14 at 14:25
@TreeNguyen sorry it should have been preloadImages.arguments.length – James Stott Dec 28 '14 at 14:32
Why don't you use image.length instead of image.argumens.length. And I still don't get the line image[i].src = image.arguments[i]. Can you show me what is it? – Tree Nguyen Dec 28 '14 at 14:33
Ok get the idea. Thanks. 1 more question. After the preloadImages, what exactly is in the image array? Image, right? And the way to use it for backgroundImage is still the same? – Tree Nguyen Dec 28 '14 at 14:35
@TreeNguyen Yeah they will be but that's not that important as you can still refer to the images by their URL as they will be cached so you don't have to change anything else. – James Stott Dec 28 '14 at 14:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/67792/discussion-between-james-stott-and-tree-nguyen). – James Stott Dec 28 '14 at 14:37
I didn't test you code, but I'm pretty sure you code will only load `./5.png`, as `image` will only be `./5.png`. `var image = ('./1.png', './2.png', './3.png', './4.png', './5.png' );` is the same as writing `var image = './5.png';`. Even if you replace it with `[]` then it won't work with `preloadImages.arguments.length` as the the function will always be called with one argument if you call `preloadImages(image);` – t.niese Dec 28 '14 at 15:45
js does not have `foreach(arr as val )`. And you should not use `i` without defining the variabel, as you will pollute the global scope. – t.niese Dec 28 '14 at 15:59

Change background with a loop without flashing

1 Answers1