Changing Images (as background) every 10 seconds

Question

HTML

<div id="background">
     <img src="#" alt="Background Image" class="first"/>
     <img src="#" alt="Background Image" class="second"/>
</div>

I dont have a SRC added because it'll reduce the loading time of my page. (demo)

JQuery

        var current = "first";
        window.setInterval(function() {
            if(current == "first") {
                $("#background .second").prop("src", getMessage());
                setTimeout(function(){
                    $("#background .second").animate({
                        opacity: 1
                    }, 1000);
                    $("#background .first").animate({
                        opacity: 0
                    }, 1000);
                },1000);
                current = "second";
            } else if (current == "second") {
                $("#background .first").prop("src", getMessage());
                setTimeout(function(){
                    $("#background .first").animate({
                        opacity: 1
                    }, 1000);
                    $("#background .second").animate({
                        opacity: 0
                    }, 1000);
                },1000);
                current = "first";
            }
            getMessage()
        }, 5000);

so I have an array with src links to my images, which are randomly chosen by function getMessage()and while a picture is shown, the other IMG tag will change SRC and wait a second or two to get that image loaded and after that it will show with a animate.

But the problem is now: He doesn't show the second picture when the first picture got opacity 0 and the second picture got opacity 1.. Edit: The problem is the black fade between picture's.

Thanks in advance!

Yes, it's working but there is a black fade. That is supposed to be the second picture. — MikaldL, Nov 27 '13 at 09:08

score 7 · Accepted Answer · edited May 23 '17 at 10:25

7

Don't use setTimeout to add a buffer. You don't need this. What happens when the user is on a really slow connection? Your 1000ms won't do it. The correct thing to do here would be to create a new elemenent of type img. And listen to the onloadimage event. When it has fired, you can show the image.

Here is an example of this: Load Image from javascript

In addition to this you'll need some CSS:

#background > img {position:absolute; top:0; left:0;}

edited May 23 '17 at 10:25

Community

1
1

answered Nov 27 '13 at 09:14

Daniel Dimitrov

1,848
21
35

I'll have look, makes more sence then what I have now, thanks! – MikaldL Nov 27 '13 at 09:18
I'd implement this, the current conditions of my host shows why I need to do this. – MikaldL Nov 27 '13 at 09:30

score 1 · Answer 2 · answered Nov 27 '13 at 09:12

1

You need to add the following styles and it should fix your problem:

#background > img {position:absolute; top:0; left:0;}

answered Nov 27 '13 at 09:12

Pete

57,112
28
117
166

So why have you remove this as the answer when it clearly fixed your original problem? – Pete Nov 27 '13 at 09:52

Ringo · Answer 3 · 2013-11-27T09:16:05.623

0

Try to use attr() function instead of prop() Or try another one:

$("#background .first").animate({
                        opacity: 1
                    }, 1000, function(){
// after finished first animation
$("#background .second").animate({
                        opacity: 0
                    }, 1000);
});

edited Nov 27 '13 at 09:16

answered Nov 27 '13 at 09:08

Ringo

3,795
3
22
37

score 0 · Answer 4 · answered Nov 27 '13 at 09:23

I would really recommend using CSS for the transition. I made a JSfiddle - http://jsfiddle.net/9GEAn/1/ and it's far more efficient than the way you wrote it (I would recommend preloading the images, even though I didn't in the demo).

window.setInterval(function () {
    current++;
    if (current>=backgrounds.length) { current=0;}
    if ($bg1.css("opacity")==1) {
        $bg2.css({
            "background-image":"url("+backgrounds[current]+")",
            "opacity":"1"});
        $bg1.css("opacity","0");
    }
    else {
        $bg1.css({
            "background-image":"url("+backgrounds[current]+")",
            "opacity":"1"});
        $bg2.css("opacity","0");
    }
}, 5000);

Changing Images (as background) every 10 seconds

4 Answers4