Member Avatar for standardt

I have a gallery of thumbnails on a webpage, and when clicking on one of the thumbnail, the full image appears in a popup. All good, but the image in the pop-up loads only after the parent page finished loading, which can take quite long.

It is my understanding that modern browsers, when rendering a page, does it in a serial way, in this order: text, images, local popups. But I might be wrong.

So, can anyone give me a hint on how to make it load the image in the popup before the parent page loads completely?

  • 4 Contributors
  • 13 Replies
  • 185 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by badda
Member Avatar for adorosh

Do you have a one image to be loaded first of all? Just use that:

<head>
<script type="text/javascript">
var img = new Image;
img.src = "http://..."; // place an URL here
</script>
</head>

I specified the HEAD tags for your information, that this script should be performed just as it is, not within a function.

Member Avatar for standardt

Thank you for your time to take a look at this post, but I do not think this is what I want.

Let me explain it this way (my bad English might have induced you in error):
-> I have a page with image thumbnails - very big page
-> When I click on any thumbnail, a JavaScript function enters and launches a PopUp that displays the zoomed thumbnail.

My problem is that the PopUp loads only after the page of thumbnails and all of the thumbnails finished loading.

Member Avatar for hielo

It sounds like you are using an automatic pop-up that gets triggered AFTER all the thumbnails are loaded. It that is the case, then perhaps you should consider calling the popup after the first or second or third etc., image is loaded instead of waiting for all of them to load. IF you choose to call the popup after image 3 is loaded, you just need to set an onload event handler on that image so that the popup loads. EX:
<img src="image.gif" onload="popup(this.src)"/>

would call your function popup, passing it the value of the src attribute.

Member Avatar for hielo

Here's another possibility. I think it is self explanatory.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript"><!--
function popup(pg){
	window.open(pg,"thumbnail");
}
//cache some of the images
var picture=[];

//picture 1
picture[ picture.length] = new Image(100,25); 
picture[ picture.length-1].src="http://tbn0.google.com/images?q=tbn:CEJ6v_RioxskhM:http://www.cs.indiana.edu/hyplan/kinzler/pubs/pvfigs/31.gif";

//picture 2
picture[ picture.length] = new Image(100,25);
picture[ picture.length-1].src="http://tbn0.google.com/images?q=tbn:YgyENENqo-IHsM:http://www.boutell.com/baklava/sconeApplet/start.gif";

//--></script>

</head>
<body>
<!-- load the first two images cached and call the popup after the second image finishes loading -->
<img src="http://tbn0.google.com/images?q=tbn:CEJ6v_RioxskhM:http://www.cs.indiana.edu/hyplan/kinzler/pubs/pvfigs/31.gif"  alt="http://tbn0.google.com/images?q=tbn:CEJ6v_RioxskhM:http://www.cs.indiana.edu/hyplan/kinzler/pubs/pvfigs/31.gif">
<img src="http://tbn0.google.com/images?q=tbn:YgyENENqo-IHsM:http://www.boutell.com/baklava/sconeApplet/start.gif" onload="popup(this.src)"  alt="http://tbn0.google.com/images?q=tbn:YgyENENqo-IHsM:http://www.boutell.com/baklava/sconeApplet/start.gif">

<script type="text/javascript"><!--
//cache the rest of the images
//picture 3
picture[ picture.length] = new Image(100,25); 
picture[ picture.length-1].src="http://tbn0.google.com/images?q=tbn:gPqvrBkrx3DwDM:http://blogoscoped.com/files/google-com-history/thumb/1997.jpg";

//picture N
picture[ picture.length] = new Image(100,25); 
picture[ picture.length-1].src="http://tbn0.google.com/images?q=tbn:aZYOvBjNyse0IM:http://my.opera.com/ThePast/homes/files/google%2520com%2520tianmen.png";

//--></script>
<img src="http://tbn0.google.com/images?q=tbn:gPqvrBkrx3DwDM:http://blogoscoped.com/files/google-com-history/thumb/1997.jpg" alt="">

</body>
</html>
Member Avatar for standardt

Thank you all for your time.
The last solution solved my problem in a very elegant way.

Member Avatar for badda

Could you please post your solution? I have the same problem - a huge thumbnail gallery that takes long to load - and the popups do not load until the main page is completely loaded. I can't really deduct a solution from the above code, because the popup on my page does not open after the second image has loaded (as shown in the above code) but as soon as someone clicks on a thumbnail.
Thanks in advance!

Badda

Member Avatar for standardt

The code above uses the preloading mechanism - it first loads the images and after that it starts loading the document.

What I've used that code for is not what you need. In the case you are referring to, I think you are using document.onload() - which means that the document will be ready for execution (and the popups) only after the DOM and Images are fully loaded. The trick is to check when the DOM is ready and then add some hooks to the images.

Right now I don't have the time, but I'll create a case in some time.

Member Avatar for badda

Thanks for the reply. The onload() would not solve my problem, however. onload() is called as soon as the HTML of the page is finished loading. The HTML page does not take long to load, but the included thumbnail images inside the HTML page take very long. What happens now is, that - if the user clicks on an already loaded thumbnail further up on the page, the popup will open, but the large image inside the popup will not load until all thumbnails on the main page are loaded.
The way I see the problem is:
The HTML of the thumbnail gallery loads very fast and fills up the Browsers download queue with all the included thumbnails. The popup window includes a new image which is appended to the download queue and will not load until the queue is processed.
Now there are two possible solutions:

  • Maybe there is a way to trick the browser into placing the popup image further up in the queue.
  • The download queue must be kept small by means of a javascript managing all the image downloads.

Having the first option would be very nice - that would make things a lot easier.
The second option is a mess to implement and raises a few questions: what is the optimal number of simultaneous image downloads to keep inside the current download queue etc.

Would be great if anybody had a solution

Member Avatar for badda

To see what I mean, check this page: http://badda.redio.de/test/

Click on one of the gallery images while the page is loading - the image at the very top will not change until all the images are fully loaded.

Member Avatar for standardt

The problem seems to be that you can execute the JavaScript code only after all the html document is ready (that means markup, content text and fully loaded images).

If you can wait until saturday/sunday I'll have a look over your problem and suggest the best action.

p.s.: sorry for the long time, but work is keeping me busy.

Member Avatar for badda

The problem seems to be that you can execute the JavaScript code only after all the html document is ready (that means markup, content text and fully loaded images).

If you can wait until saturday/sunday I'll have a look over your problem and suggest the best action.

p.s.: sorry for the long time, but work is keeping me busy.

Thanks, you're much appreciated! I still haven't found a solution.

Member Avatar for standardt

There are two solutions you can try: the first one is to call your JavaScript code at the end of the html body tag

<body>
[all HTML]
<script type="text/javascript" src="myscript.js"></script>
</body>
</html>

// at the end of myscript.js
initialiseFunction();

This way, when the web engine parses the document it will have most of the DOM ready for the JavaScript code.

Another option will be to use the DOMContentLoaded event which basically does the same thing, but it's supported only by Mozilla.

p.s.: The window.onload() gives full control to JavaScript when all the html document has been processed (including tags/ scripts / images / etc. )
p.p.s.: I've tried to look back over your example test page, but couldn't find it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.