CODEWITHSUNDEEP
javascript
cdm89
cdm89

Reputation: 51

Images delay in slide show before they display

So im trying to use my images as a background, and I want them to be on a loop so it changes between the three, below is my code the looping seems to be working but I have two issues I can't seem to resolve: 

<head>
    <meta http-equiv="Kess Agency" content="text/html; charset=iso-8859-1"/>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="created by kess" content="en-us">
    <style>
    body{
        background-attachment: fixed;
        background-repeat:no-repeat;
        background-position: 300 200;

    }
    </style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//auto resize



    var imgs=new Array()
    imgs[0]="images/img1.png";
    imgs[1]="images/img2.png";
    imgs[2]="images/img3.png";
    //time between slides
    var speed=7000
    //preload images
    var processed=new Array()
    for(i=0;i<imgs.length;i++){
        processed[i]=new Image();
        processed[i].src=imgs[i];
    }
    var inc=-1;
    function slideimg(){
        if (inc<imgs.length-1)
            inc++;
        else
            inc=0;
        document.body.background=processed[inc].src;
    }
    if (document.all || document.getElementById)
    window.onload=new Function('setInterval("slideimg()",speed)');

</script>

</head>
 <body>
     <p class= "type"></p>
</body>
</html>​

Upvotes: 1

Views: 910

Answers (1)

qooplmao
qooplmao

Reputation: 17759

I think your problem is that you are waiting until the page loads and then running setInterval. As far as I know setInterval will wait until the interval is done and will then run. One way you could do it is..

function slideimg(){
    if (inc<imgs.length-1)
        inc++;
    else
        inc=0;
    document.body.background=processed[inc].src;
    setTimeout(function(){
        slideimg();
    }, speed);
}

window.onload = function () {
    slideimg();
};

This way the script will run onload and the once loaded it will wait and then run again. Another benefit of doing things this way rather than using setInterval is that this way the process will finish before running again (setInterval will just try to run the script every 'whatever' seconds you chose, whether things have loaded or not.

For the background sizing you could try setting the css to background-size: cover; although this is new (CSS3).

Upvotes: 1

Related Questions