Make an image load last?

  • CazpianXI
  • Proficient
  • Proficient
  • User avatar
  • Posts: 285

Post 3+ Months Ago

I have a webpage that has a very large image at the top of the page... and over a dial-up connection, it makes the entire page take a VERY long time to load. Is there any way that I can make the image load after the rest of the page has loaded? (So that my visitors using dial-up connections don't have to wait for the image to load in order to see the rest of the page)

Thanks.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I did some quick searches for some javascripts but couldn't find any. I'm not certain it's possible to do what you want. Maybe someone else can confirm or correct that.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

This sounds like a job for CSS. heh.

Seriously though, I your using CSS properly and you're content isn't in tables, the text is rendered as soon as the user agent gets the HTML doc. Then the images get rendered as they load. If the content is in a table, some user agents will wait till the entire contents of the table is loaded before it actually renders the table.

I've wondered about a javascript method of controlling the render/load order, but never persued it.

Good question.
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

The load order is determined by the browser, and as far as I know is not adjustable via client or server-side coding.
  • CazpianXI
  • Proficient
  • Proficient
  • User avatar
  • Posts: 285

Post 3+ Months Ago

Hmmm... too bad I can't do it :cry:

I was trying to think of a workaround to this problem, and this is what I thought about:

Instead of loading the large image, just load a 1px by 1px transparent gif (that ought to load fast enough). Then, onload calls a javascript function which replaces the 1x1 gif with the large image that I want displayed.

Any thoughts about doing it this way? My largest concern is, will it work with all browsers... or will some visitors end up seeing nothing but the 1x1 gif?
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

why do you want a very large image in your website anyway? can you make it smaller using the save for web option in your image editor?
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Maybe you could put the script that loads the big image in place of the transparent one at the bottom of the page, so that it won't run until the rest of the document is loaded and then use a regular img tag inside of a noscript tag for people who have javascript disabled. I don't really have anyway to test it because I don't have dialup anymore, but it's worth a shot.

Code: [ Select ]
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<img id="bigImage" src="images/spacer.gif" alt="">
<noscript>
<img src="images/big.gif" alt="">
</noscript>
</td></tr>
<tr><td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing urna eget nunc. In ultricies dapibus risus. Aliquam sed quam. Integer dapibus venenatis velit. In bibendum, quam nec pulvinar blandit, orci enim tempor mauris, non adipiscing elit enim vitae justo. Nam id tortor. Suspendisse est. Sed eu wisi. Aliquam erat volutpat. Etiam lorem. Duis scelerisque est pulvinar metus.</p>
<p>Aliquam molestie, augue et congue elementum, leo dolor consectetuer wisi, ac vestibulum nulla elit sit amet est. Morbi neque sem, dictum at, laoreet ac, tempor ut, mi. Aenean neque elit, volutpat in, ullamcorper id, adipiscing sed, neque. Donec quam elit, ultrices venenatis, molestie ac, convallis vitae, purus. Ut placerat, ante a rhoncus mattis, wisi pede viverra est, ut dapibus nunc quam sed lectus. Integer a velit. Cras dolor. Maecenas ut lorem. Fusce metus neque, consequat sed, interdum id, fermentum in, magna. In vel quam. Nunc lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec facilisis, justo vel aliquam fringilla, felis lectus volutpat leo, sed posuere arcu quam ac velit.</p>
</td></tr>
</table>

<script type="text/javascript">
<!--
function LoadImage()
{
 if (document.getElementById) {
         document.getElementById("bigImage").src="images/big.gif";
    }
}
LoadImage();
//-->
</script>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. </head>
  5. <body>
  6. <table border="0" cellpadding="0" cellspacing="0">
  7. <tr><td>
  8. <img id="bigImage" src="images/spacer.gif" alt="">
  9. <noscript>
  10. <img src="images/big.gif" alt="">
  11. </noscript>
  12. </td></tr>
  13. <tr><td>
  14. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing urna eget nunc. In ultricies dapibus risus. Aliquam sed quam. Integer dapibus venenatis velit. In bibendum, quam nec pulvinar blandit, orci enim tempor mauris, non adipiscing elit enim vitae justo. Nam id tortor. Suspendisse est. Sed eu wisi. Aliquam erat volutpat. Etiam lorem. Duis scelerisque est pulvinar metus.</p>
  15. <p>Aliquam molestie, augue et congue elementum, leo dolor consectetuer wisi, ac vestibulum nulla elit sit amet est. Morbi neque sem, dictum at, laoreet ac, tempor ut, mi. Aenean neque elit, volutpat in, ullamcorper id, adipiscing sed, neque. Donec quam elit, ultrices venenatis, molestie ac, convallis vitae, purus. Ut placerat, ante a rhoncus mattis, wisi pede viverra est, ut dapibus nunc quam sed lectus. Integer a velit. Cras dolor. Maecenas ut lorem. Fusce metus neque, consequat sed, interdum id, fermentum in, magna. In vel quam. Nunc lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec facilisis, justo vel aliquam fringilla, felis lectus volutpat leo, sed posuere arcu quam ac velit.</p>
  16. </td></tr>
  17. </table>
  18. <script type="text/javascript">
  19. <!--
  20. function LoadImage()
  21. {
  22.  if (document.getElementById) {
  23.          document.getElementById("bigImage").src="images/big.gif";
  24.     }
  25. }
  26. LoadImage();
  27. //-->
  28. </script>
  29. </body>
  30. </html>
  • Johan007
  • Guru
  • Guru
  • User avatar
  • Posts: 1080
  • Loc: Aldershot, UK

Post 3+ Months Ago

I could be wrong here but I have always believed the text to show first if you set all the image sizes in the tag like height and width as is the proper way of doing HTML!
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

The regular img tag inside the noscript tag should have the height and width set as per usual. I should have put some values in there, but that's what I get for posting at 4 am after being up all night.

However, if you set the size of the transparent gif that is going to be swapped then it could cause problems. If you set it to the 1x1 size then when you swap the image it may or may not work correctly. When I tried this before for a loading script for someone else a while back not all the browsers handled the resizing of the swapped image correctly. If you set the size of the transparent gif to the actual size of the image for which it is a placeholder then when javascript is disabled it will create a big space above the image loaded from the regular tag inside the noscript tag.

If javascript is enabled the little gif should load without much delay at all then the rest of the content should load and finally the script should run which will swap the big image for the transparent gif. If javascript is disabled then the little gif will load immediately but only create a tiny bit of spacing and won't be swapped. The regular image tag will then load as per usual.

I'm not entirely sure it will create the effect that is being sought, but it seemed like it was worth a shot. It seemed to work ok for me, but I've got a fast connection and no access to dialup right now, so I can't really test it properly.
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

Images loaded with Javascript 'onLoad' are requested after IMG files found in the HTML code.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

But will the browser load an image inside the noscript tag if javascript is enabled? If it won't then setting the src of the image from a script at the bottom of the page after loading the little transparent gif from the html code seems like a possibility. I just tried it with a very large image inside a table above some paragraphs of text and a smaller image, and I'm seeing the other content while the browser is still loading the big image in both mozilla and IE6.
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

RichB, I read your post a little closer - it's a good solution.

My idea was to load a place holder image as per the IMG tag, and use JavaScript/onLoad to substitute. That suggestion will fail for script disabled user agents.

Although, a little voice keeps nagging at me... should a really large image be presented on a page in such a fasion as to surprise/inconvenience low-bandwidth users? Maybe another approach would be more appropriate.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Yeah, also I just realized that my suggestion won't work for NN 4.X and he did specify all browsers. There's probably a way to modify it to work with NN 4 but I'm not sure offhand.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

I have implimented a similar thing on my page:
alpha-matrix-design.co.uk

I have a large image (large in dimensions) for people with large screen resolutions, and a smaller sized image for normal size screens.
The image tag is written into place with a script document.write() so I also have a noscript tag cotnainging the default image HTML.
Take a look at the scoruce code, it's the first <h1> tag in the page.
  • the_Maven
  • Graduate
  • Graduate
  • the_Maven
  • Posts: 196

Post 3+ Months Ago

There is another alternative to this, its chopping the image up into squares and using css-p to reassemble them ... but i don't know if that is what you are looking for. here's an example of what i am talking about, although in IE the text shows up last still, but it's worth a look i think.

http://minadream.com/timburton/ArtPicture3.htm
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

@ CazpianXI (thread-starter / initial poster)...

Partial quote from Moderator digitalMedia further up in this thread...
digitalMedia wrote:
This sounds like a job for CSS. heh.
I agree, and will point you to another thread where I supplied a solution for someone else with a similar question...

Link to other thread: i want to Load Bkgd Image LAST

Now, when I helped y13artist in the above linked-to thread, it was to prevent a large image loading before a table did (in your case - text - same thing -it's still "content" that needs to be loaded before any large image does).

Just refer to my solution in that other thread and apply it to suit your needs. If you have any problem implementing what I suggested, then post back here in this thread that you started. Also provide a working URL so that I can examine your source code in order to modify your code to create a working example temporarily uploaded to my server specifically for you, as I had initially done for y13artist. The working example for y13artist no longer exists at my server, because his problem was solved. If you need the same, I will provide it for you (temporarily) at my server.

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 55 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.