Prototype/ajax - load page before images?

~~Moh~~ · 15-06-2009, 09:09 PM

Most of our pages have a few images on them, and for the page to load, all the images have to load. So some pages take ages to load fully. Which may make people think the page isn't loading.

So is there any way for the text to be loaded instantly and then the images are loaded as they would be on a normal html page?

AlexOC · 16-06-2009, 08:47 PM

Code:

 
<html>
<body>
<p>Images:</p>
<img name=image0>
<img name=image1>
<img name=image2>
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
function LoadImage(imageName,imageFile)
{
  if (!document.images) return;
  document.images[imageName].src = imageFile';
}
LoadImage('image4','number4.gif');
LoadImage('image5','number5.gif');
LoadImage('image6','number6.gif');
LoadImage('image7','number7.gif');
</script>
</html>

~~Moh~~ · 16-06-2009, 08:53 PM

Originally Posted by AlexOC

Code:

 
<html>
<body>
<p>Images:</p>
<img name=image0>
<img name=image1>
<img name=image2>
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
function LoadImage(imageName,imageFile)
{
  if (!document.images) return;
  document.images[imageName].src = imageFile';
}
LoadImage('image4','number4.gif');
LoadImage('image5','number5.gif');
LoadImage('image6','number6.gif');
LoadImage('image7','number7.gif');
</script>
</html>

I mean automatically. We have pages which display all the badges, staff list images etc..

So preloading them would take too long.

AlexOC · 16-06-2009, 09:05 PM

That should Delay the Images Loading untill the text context is loaded.

You can also control which order the images load, might be useful to load the layout then the list of badges etc.

Found it here: http://www.cryer.co.uk/resources/javascript/script3.htm

Iszak · 16-06-2009, 11:18 PM

Well I set myself the challenge to do this in Prototype, as I'm a jQuery lover, and this is what I came up with (if any Prototype expert know how to do it better, please tell me).

Preview: http://pastebin.me/4a3824d7b2069
Code:

Code:

document.observe("dom:loaded", function(){
  $$('img').each(function(img){
    if (!img.complete) {
      img.hide();
      img.observe('load', function(event){
        event.element().show();
      });
    }
  });
});

Turbocom · 17-06-2009, 03:33 AM

Nice one Iszak!

I'm using it.

Thread: Prototype/ajax - load page before images?

Thread Tools

Prototype/ajax - load page before images?

Posting Permissions