JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Need to Preload many Images (and show a wait screen)

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jun 2005
Posts: 4
Reputation: bitfiddler is an unknown quantity at this point 
Solved Threads: 0
bitfiddler bitfiddler is offline Offline
Newbie Poster

Need to Preload many Images (and show a wait screen)

 
0
  #1
Jun 29th, 2005
I have a website at:
http://www.outingsunlimited.com
This site has quite a few "mouseover" images (37 actually) and I need to preload them before I start.
When someone goes to the site, while the images are loading.....the screen is just blank and they think there is a problem.....

HELP !!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 354
Reputation: Troy is an unknown quantity at this point 
Solved Threads: 5
Troy's Avatar
Troy Troy is offline Offline
Posting Whiz

Re: Need to Preload many Images (and show a wait screen)

 
0
  #2
Jun 29th, 2005
I wrote a system to do this a few years ago. You can look at what I did by going to http://www.mvirony.com/, then navigate to the Boat Layout page. When you hit the home page, make sure you allow popups for the site. There aren't any ads or anything, but the Boat Layout page uses a popup window to tell the user to wait while images load--and you are especially interested in this part. Once images are loaded, the popup window closes automatically. (I coded this solution before popup ads were a big problem, and thus, before everybody had popup blockers.)

Simply view the source of the page to look at my javascript. Notice near the top of the script, I pop a window--this window loads a small page telling the user to please wait while images load. Then look at the LoadPhotos() function. This creates a javascript image variable for each of the large images--there are 3 which is why I loop 3 times. Notice I named my three images layout1.jpg, layout2.jpg, and layout3.jpg. Finally, notice that on window load (window.onload), I close the popup window.

I hope you are able to make sense of it to create your own solution. It works great, except if I were coding this today, I'd use a DIV that I dynamically display then hide once the images are loaded. Unfortunately, ad spammers have killed all legitimate use of popup windows.
Troy Wolf is the author of SnippetEdit. "Website editing as easy as it gets." IX Web Hosting
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 4
Reputation: bitfiddler is an unknown quantity at this point 
Solved Threads: 0
bitfiddler bitfiddler is offline Offline
Newbie Poster

Re: Need to Preload many Images (and show a wait screen)

 
0
  #3
Jun 30th, 2005
•
•
•
•
Originally Posted by Troy
I wrote a system to do this a few years ago. You can look at what I did by going to http://www.mvirony.com/, then navigate to the Boat Layout page. When you hit the home page, make sure you allow popups for the site. There aren't any ads or anything, but the Boat Layout page uses a popup window to tell the user to wait while images load--and you are especially interested in this part. Once images are loaded, the popup window closes automatically. (I coded this solution before popup ads were a big problem, and thus, before everybody had popup blockers.)

Simply view the source of the page to look at my javascript. Notice near the top of the script, I pop a window--this window loads a small page telling the user to please wait while images load. Then look at the LoadPhotos() function. This creates a javascript image variable for each of the large images--there are 3 which is why I loop 3 times. Notice I named my three images layout1.jpg, layout2.jpg, and layout3.jpg. Finally, notice that on window load (window.onload), I close the popup window.

I hope you are able to make sense of it to create your own solution. It works great, except if I were coding this today, I'd use a DIV that I dynamically display then hide once the images are loaded. Unfortunately, ad spammers have killed all legitimate use of popup windows.
I'm fairly new to this "java" thing but I think I can get thru your code all right.
BTW, since it is "today"....how would you use the DIV ?
Did u look at the images I am loading at
http://www.outingsunlimited.com
????
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 4
Reputation: bitfiddler is an unknown quantity at this point 
Solved Threads: 0
bitfiddler bitfiddler is offline Offline
Newbie Poster

Re: Need to Preload many Images (and show a wait screen)

 
0
  #4
Jun 30th, 2005
The "popup" works great...thx.....
but the "popup" won't close after the pics load ?????

Here is the code

<html>
<head>

<script language="javascript">
var winLeft = (screen.width-400)/2;
var winTop = (screen.height-150)/2;
var winWait = window.open("wait.htm","WinWait","width=400, height=150,top="+winTop+",left="+winLeft+",location=no, menubar=no, status=no, toolbar=no, scrollbars=no, resizable=no");
var iOff = new Image(); iOff.src = "indicatorBlank.gif";
var iOn = new Image(); iOn.src = "indicator.gif";
var photos = new Array(37);
LoadPhotos();

function SwapImg(x,imgSrc) {
document.getElementById(x).src = imgSrc;
}

function ShowPhoto(i) {
if (photos[i]) {
document.getElementById('iPhoto').src = photos[i].src;
}
}

function LoadPhotos() {
imgSrc = "images/TEXTPIC-659X367-1.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[1] = imgVar;
imgSrc = "images/TEXTPIC-659X367-4.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[2] = imgVar;
imgSrc = "images/TEXTPIC-659X367-5.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[3] = imgVar;
imgSrc = "images/TEXTPIC-659X367-6.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[4] = imgVar;
imgSrc = "images/TEXTPIC-659X367-7.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[5] = imgVar;
imgSrc = "images/TEXTPIC-659X367-8.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[6] = imgVar;
imgSrc = "images/TEXTPIC-659X367-9.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[7] = imgVar;
imgSrc = "images/TEXTPIC-659X367-10.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[8] = imgVar;
imgSrc = "images/TEXTPIC-659X367-12.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[9] = imgVar;
imgSrc = "images/TEXTPIC-659X367-13.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[10] = imgVar;
imgSrc = "images/TEXTPIC-659X367-16.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[11] = imgVar;
imgSrc = "images/TEXTPIC-659X367-17.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[12] = imgVar;
imgSrc = "images/TEXTPIC-659X367-18.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[13] = imgVar;
imgSrc = "images/TEXTPIC-659X367-20.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[14] = imgVar;
imgSrc = "images/TEXTPIC-659X367-AGENCIES.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[15] = imgVar;
imgSrc = "images/TEXTPIC-659X367-SITE-SEARCH1.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[16] = imgVar;
imgSrc = "images/TEXTPIC-659X367-STATE-SELECT.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[17] = imgVar;
imgSrc = "images/TEXTPIC-659X367-CONTACT-US.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[18] = imgVar;
imgSrc = "images/TEXTPIC-494x275-1.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[19] = imgVar;
imgSrc = "images/TEXTPIC-494x275-4.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[20] = imgVar;
imgSrc = "images/TEXTPIC-494x275-5.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[21] = imgVar;
imgSrc = "images/TEXTPIC-494x275-6.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[22] = imgVar;
imgSrc = "images/TEXTPIC-494x275-7.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[23] = imgVar;
imgSrc = "images/TEXTPIC-494x275-8.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[24] = imgVar;
imgSrc = "images/TEXTPIC-494x275-9.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[25] = imgVar;
imgSrc = "images/TEXTPIC-494x275-10.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[26] = imgVar;
imgSrc = "images/TEXTPIC-494x275-12.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[27] = imgVar;
imgSrc = "images/TEXTPIC-494x275-13.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[28] = imgVar;
imgSrc = "images/TEXTPIC-494x275-16.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[29] = imgVar;
imgSrc = "images/TEXTPIC-494x275-17.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[30] = imgVar;
imgSrc = "images/TEXTPIC-494x275-18.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[31] = imgVar;
imgSrc = "images/TEXTPIC-494x275-20.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[32] = imgVar;
imgSrc = "images/TEXTPIC-494x275-viewbystate.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[33] = imgVar;
imgSrc = "images/TEXTPIC-494x275-SITESEARCH1.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[34] = imgVar;
imgSrc = "images/TEXTPIC-494x275-STATESEL.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[35] = imgVar;
imgSrc = "images/TEXTPIC-494x275-CONTACTUS.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[36] = imgVar;
imgSrc = "images/TEXTPIC-659x367-view-by-state.jpg";
imgVar = new Image(); imgVar.src = imgSrc;
photos[37] = imgVar;

}

function LoadTrigger() {
winwait.close();
}

window.onload = LoadTrigger;

</script>

</head>

<body>

</body>
</html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 354
Reputation: Troy is an unknown quantity at this point 
Solved Threads: 5
Troy's Avatar
Troy Troy is offline Offline
Posting Whiz

Re: Need to Preload many Images (and show a wait screen)

 
0
  #5
Jun 30th, 2005
First of all, because this is a pet-peeve of mine, it's "Javascript"--not "Java". The two are not even related. Javascript is not a scripting subset of Java. However, VBScript is a scripting subset of Visual Basic (VB).

Looking at your code, I don't see a problem, but are you sure there aren't any javascript errors? If you are using IE, when your page loads, do you notice a small error icon in lower left? If you use Firefox, it has an excellent Javascript Errors Console window that you can leave open to see any and all errors--it's a great tool for development.

You can create a DIV like this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <div id="waitdiv" style="position:absolute;top:100px;left:100px;padding:25px;font-size:20pt;">Please wait...images loading...</div>
Of course you can put any HTML you want inside the div and change the style to whatever you want. Then, in your LoadTrigger() function, do this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. document.getElementById('waitdiv').style.display = 'none';
Troy Wolf is the author of SnippetEdit. "Website editing as easy as it gets." IX Web Hosting
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 4
Reputation: bitfiddler is an unknown quantity at this point 
Solved Threads: 0
bitfiddler bitfiddler is offline Offline
Newbie Poster

Re: Need to Preload many Images (and show a wait screen)

 
0
  #6
Jun 30th, 2005
Thx a million....the "popup" problem was that I had the wrong spelling for "winWait"...I had a lower-case "w".
Also, the <DIV> function works great !!

Thanks again.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxjspservlets array browser bug captchaformproblem cart checkbox child class close codes createrange() css cursor date debugger decimal dependent design disablefirebug dom dropdown editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming progressbar prototype redirect runtime safari scale scriptlets scroll search security shopping size software toggle unicode w3c web wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC