Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Large image does not render consistently in IE


  • Please log in to reply

#1
Gregadeth

Gregadeth

    New Member

  • Member
  • Pip
  • 2 posts
Hello -

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?
  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Some problems in delay or rendering is because the images need to be preloaded. Have you tried a preloader?
  • 0

#3
Gregadeth

Gregadeth

    New Member

  • Topic Starter
  • Member
  • Pip
  • 2 posts

Some problems in delay or rendering is because the images need to be preloaded. Have you tried a preloader?


I haven't... but not sure if that will work. Sometimes I get an incomplete image even after the image has rendered perfectly on another attempt.
  • 0

#4
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Can you post the site link? And link to where you got the DHTML mouseover script? You HAVE to tell browsers the expected width/height of the image or image container. Background images are not sizable at this time until browsers start supporting CSS 3.0.

Have you got a proper document type? If not, browsers are in Quirks Mode and IE does not handle parsing pages in Quirks Mode very well. Have you validated your CSS and HTML code to remove all errors?
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP