SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6-8 double downloading images

    Looking through my access logs, I see IE6-8 is downloading my thumbnail images twice when it only needs to download it once.

    I'm guessing it has something to do with this piece of code.

    Code:
    <a class="overlay" style="background-image:url('./image.jpg');" href="image.html">
       <span>
          <img src="./image.jpg" alt="An image" width="167" height="250"/>
       </span>
    </a>
    The <span> is given an overlay image as a background on hover via CSS and the <img> element has a visibility of hidden. This allows me to have a hover overlay for the image and keep the actual <a> and <img> elements in there for the semantics.

    I'd really like to know why IE is downloading the image twice, and what I can do to stop or work around it.

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Perhaps Internet Explorer's default behaviour is to ignore the style formatting of a background image which is hidden using the visibility properly, I can understand why you might want to speed up the process of loading an image (by pre caching it) however that's probably not the best way you could go about it, I would recommend leaving it to load on it's own when it's needed rather than burn peoples bandwidth loading stuff they may not want to look at.

  3. #3
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't have anything to do with caches or speed, the reason it's done the way it is, is because I want to keep the semantic meaning of the <a> and <img> elements and avoid using javascript for an overlay that is placed over an image on hover.

    Here's an example of it in action. Note how when you hover over one of the wallpapers, an iPhone overlay is displayed.

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Ohh, now I see what your doing in action I get what your trying to achieve, to be honest I still think it may be something in relation to how IE treats content with visibility set, however in truth I don't really know why IE would defy the convention of just requesting the file once. If it were me I would probably have two versions (one with and one without the iPhone "layering") side by side in a single image and then trigger the "on-roll-over" event using the background-image property to use CSS sprites, it would definitely work around the issue and wouldn't need the IMG but I'm not sure it's what your really looking for.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •