I'm new here, with what seems to be an embarrassingly simple problem with a DHTML image swap.
I'm using a large, absolutely positioned image as a background image for a web page (I need to hold the body background in reserve for something else). I'm using a javascript image swap to change this image when users click on certain links. Worth noting: this action also unhides an element on the page (before the image swap), pushing elements below down.
function popImage() { ... //do some other stuff, unhide an element near the top of the page that is document.getElementById('background').src=[i]path to new image[/i]; document.getElementById('background').style.height='1325px'; ... }
This works perfectly in all browsers... except, of course, Internet Explorer. In IE7, here's what happens:
- Sometimes the image loads completely so all of it is visible.
- Sometimes the image does not load at all
- Sometimes (this is the worst) the image is cropped at some random point on the screen
- More often than the others, the image is cropped at the fold so it looks OK until trying to scroll down.
There are about six different images; performance is not related to image size. I have tried setting timeouts, but even with a ridiculously long wait (10 seconds) I'm getting the same results.
Any ideas on what I can do to force a full render?