•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 455,974 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,807 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 4114 | Replies: 13 | Solved
 |
•
•
Join Date: Nov 2007
Location: Romania, Constanta
Posts: 8
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
PopUp load priority 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?
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?
•
•
Join Date: Dec 2007
Location: Russia
Posts: 11
Reputation:
Rep Power: 1
Solved Threads: 1
Newbie Poster
Do you have a one image to be loaded first of all? Just use that:
I specified the HEAD tags for your information, that this script should be performed just as it is, not within a function.
javascript Syntax (Toggle Plain Text)
•
•
Join Date: Nov 2007
Location: Romania, Constanta
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
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.
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
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.
<img src="image.gif" onload="popup(this.src)"/>
would call your function popup, passing it the value of the src attribute.
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
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>
•
•
Join Date: Nov 2007
Location: Romania, Constanta
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Thank you all for your time.
The last solution solved my problem in a very elegant way.
The last solution solved my problem in a very elegant way.
•
•
Join Date: Jan 2008
Posts: 5
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
Thanks in advance!
Badda
Last edited by badda : Jan 21st, 2008 at 5:27 pm.
•
•
Join Date: Nov 2007
Location: Romania, Constanta
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
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.
Standard Blue.
•
•
Join Date: Jan 2008
Posts: 5
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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:
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
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.
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
•
•
Join Date: Jan 2008
Posts: 5
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
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.
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Previous Thread: $('idname') means what?
- Next Thread: Position and Load an image when Clicked
