Results 1 to 3 of 3

Thread: Way the images load in browsers

  1. #1
    Join Date
    Oct 2009
    Thanked 3 Times in 3 Posts

    Default Way the images load in browsers

    Most of the time the sliced images while loading appear as patches or in parts which looks really bad wen a website or a mailer is loading, can we define which images to load 1st and then the rest through some code??

  2. #2
    Join Date
    Mar 2006
    Illinois, USA
    Thanked 690 Times in 678 Posts


    I don't know of a way to actually tell the browser which files to load first. There is no code that makes a list, or anything like that.

    However, here are some options:

    1. You can save your images as progressive (works with JPGs at least), so they all load very quickly for a first pass then will get detail as the downloads continue. That may help. You would do this in your image editor, just choosing "progressive" as you save the image. You can choose 3-pass, for example, and it will load three times: once very badly, once with a little more detail and once with final quality. And the good part of this is that it doesn't usually take more space to save an image like this-- sometimes even less than without.

    2. You can DELAY some images by adding them to the page later by javascript. I don't really recommend that, nor can you force anything to go faster, but you can at least let the important images load and get out of the way before you let the rest of the page do so.

    3. You can stack your html code so that the first image in the html is the first image you want to load, the second follows, then the third, etc. I'm not sure this is really going to force a browser into a certain order, but it seems like it might help. You would have to integrate this into your layout, however, so that is difficult, but you could use layered divs that position those first images beyond the rest, etc.

    4. You can not use slices-- use layered divs, background images and other methods to avoid slices and that way you won't have to worry about this. It doesn't exactly fix your problem but it might help.

    5. You can preload the entire page, using javascript, and though it might be hard to setup, that way the page would be revealed in a complete state, if it is that important.

    6. Also, this should only be a problem one time for visitors. Once they have visited one page, the images should remain cached at least for a little while, so no more loading required. There may be a way to change the caching settings if you have that disabled now, or something, to help this work.

    Be warned, though, that some of these ideas may generate awkward or nonstandard html, so you might be best just keeping it as is.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. The Following User Says Thank You to djr33 For This Useful Post:

    smrnsmile (10-08-2009)

  4. #3
    Join Date
    Mar 2005
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries


    Image Slices are a bit archaic and tend to produce a very constricted layout that doesn't easily adapt to various resolutions. With many modern browsers now equipped with a zoom utility (which resizes everything equally when it works), this is less critical now than it once was. However, a fluid layout using no tables and with content that can be as easily viewed in a text only browser is still to be preferred. One can express font sizes in percents and container element's dimensions in em's. That way the zoom will work (as it would with any layout if it is any good), but also older browsers and text only browsers will have no trouble with the page regardless of resolution.
    - John

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    smrnsmile (10-08-2009)


Posting Permissions

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