SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Graphics causing jumpy page on loading

    Hi, I'm not sure exactly where to post this so I hope it's in the right forum.

    I am showing the images on a new site that I am creating by using a page that does the sizing, for example:

    <img src = "page.php?src=image.jpg&width=10&height=10">

    This works great but the alt tags show up before the actual graphic does and cause the page to jump around a lot before it is completely loaded in IE. Once the page is loaded, all is well, it's just a little annoying on page load.


    Is there any way around this?


    Thanks.
    Last edited by affmark; May 4, 2007 at 12:06.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    EU/UK+DK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The jumpiness is to do with browsers reflowing the page layout because they haven't been instructed to apportion space for the image. Try adding the width and height attributes to the img tag; browsers will then "reserve" that much space in advance, and they won't have to wait until the image has loaded/started loading to know what size it is.

    Not sure about preventing the alt text from showing up, I'm afraid.
    The plus sign (+) is valid within an email address; please do not
    write or suggest code that precludes its use, as many use it as a
    "label" to filter incoming mail. </crusade>

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Wacky


    Adding height and width attributes does indeed keep the page from being jumpy but since the images are coming from a variety of sources, they are unique in their proportions. They are sized according to a max width and max height of 125 some images are only, for example, 100px in height. They become stretched when I add the width and height attributes.


    Is there some way to add these in respect to each image that isn't going to affect the page load speed?

    Thanks.

  4. #4
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    > Not sure about preventing the alt text from showing up, I'm afraid.

    you can use css to style alt text i just found recently (at least for firefox).

    img { color:#666; font-style: italic; } for example, so i suppose you could colour it to the same colour as the background, or make it miniscule or something. but then if the images aren't loading for whatever reason visitors aren't going to be able to read the alt text so this is a very stupid course of action imo. browsers displaying alt text until the image loading is good imo. not sure why you'd want to stop that.

    > They become stretched when I add the width and height attributes.

    obviously you need to set the width and height according to what the width and height of the actual images are. in your example
    <img src = "page.php?src=image.jpg&width=10&height=10">
    you're using width and height values -- you have the info right there -- so just use those values to fill in the img tag's width and height attributes accordingly.

  5. #5
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As johnyboy says don't bother trying to hide the alt text. It's fine for the images to replace it as they load.

    In order to avoid the jumping you'll need to use getimagesize to get the dimensions of each image to reserve the space. I assume you're getting images in some sort of a loop....probably from a database query.

    Code will look something like this:
    PHP Code:
    while(getting_each_image) {
     
    $path 'path-to-image.jpg';
     
    $size getimagesize($path);
    echo 
    "<img src='$path' alt='$alt$size[3]>";



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
  •