Prototype/ajax - load page before images? [Archive]

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

<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

<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:

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.