Problem with .delay() possible conflict.

Problem with .delay() possible conflict.

I am trying to accomplish 4 actions:

1. Load random background image.
2. Background image dynamically resizes to page maintaining aspect ratio.
3. Fade in the background image and content.
4. Delay the fade-in of the webpage.  

I am able to accomplish 1-3, however when I add the .delay() to the code, #2 is affected: the page doesn't load with the image sized to the window (depends on your window size).  The minute you attempt to resize the window, it kicks in and sizes it. See example here: www.fixxed.net/tn/index.html



Below is the code. Maybe I am trying to accomplish too much.

<script language="JavaScript">

var randnum = Math.random();
var inum = 3;

var rand1 = Math.round(randnum * (inum-1)) + 1;
images = new Array
images[1] = "http://www.fixxed.net/images/monitors.jpg"
images[2] = "http://www.fixxed.net/images/view.jpg"
images[3] = "http://www.fixxed.net/images/trumpets.jpg"

var image = images[rand1]

</script>
</head> 

<body> 


<script language="JavaScript">

document.write('<div id="body-background" style="display:none"> <img src="' + image + '"></div>')

</script>
<script>
$(window).load(function() {
$("#body-background").delay(1000).fadeIn(500).ezBgResize();
});

$(window).bind("resize", function(){
   $("#body-background").ezBgResize();
});
$(document).ready(function(){
 
$('#content').delay(1000).fadeIn(500);
});
</script>

    • Topic Participants

    • joel