Could someone tell me how to set up a preload page with a message stating that the page is loading and please wait? I am preloading some images and they are really slowing down my page load. Instead, I want to just load them when someone presses a link but, I don't want the page to actually start or display until the images are fully loaded. Thank you
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Loading, Please Wait Message? 2
- Thread starter hepower
- Start date
-
2
- #2
hi
you're able to load another page, pass picture names & filename to load to it (in query string, for example), there you could do anything you want (show how much pictures are left to load, for example, either in division(layer) or in textfield), & when all pictures where loaded - go ahead & load the main file
here is an example: (i use it & it works
~~~~~~~~~
//in the file from wich you're calling this preloader:
//picture names & filename to load
//you're don't have to pass pictures & filename - they are
//global; but just in case:
function openPreloader(file, pictures){
var url, prefs, preloadername, navpath, navbar
preloadername="preloader.htm"
url=preloadername+'?'+pictures+'&'+file;
top.location.href=url
}
..
then, somewhere on your page call it (openPreloader):
..
<a href="javascriptpenPreloader(filename,pictures)">open my graphic page</a>
..
your preloader:
<html><head><title>loading pictures</title>
<script type=text/javascript>
<!--
var param2="", total=100;
onload=function(){
var first,source, arr, arr1, tempImg
var theform, formname, txtname, txt
formname="numbers"
txtname="txt1"
theform=document.forms[formname]
first=(location.search.length)?location.search:null
if (first){
source=first.substr(1,first.length-1)
arr=source.split('&')
arr1=arr[0].split(',')
total=arr1.length
theform[txtname].value=total;
for (var ii=0; ii<arr1.length; ii++){
tempImg=eval('tim'+ii+'=new Image()')
tempImg.src=arr1[ii];
tempImg.onload=function(){
total--
theform[txtname].value=total
}
}
param2=arr[1]
checker()
}
}
function checker(){
if (total==0){
top.location.href=param2
}
else setTimeout('checker()',250)
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="numbers">
<table width="100%" height="100%" border="0" cellspacing="1" cellpadding="1">
<tr align='center'><td><table><tr>
<td colspan=2>please wait a moment, loading pictures..</td></tr>
<tr><td align="right">letf to load: </td><td align="left"><input type="text" name="txt1" width=30 style="width:30" onfocus="if (blur) { blur() }"></td></tr></table>
</td></tr>
</table>
</form>
</body>
</html>
~~~~~~~~~
Victor
you're able to load another page, pass picture names & filename to load to it (in query string, for example), there you could do anything you want (show how much pictures are left to load, for example, either in division(layer) or in textfield), & when all pictures where loaded - go ahead & load the main file
here is an example: (i use it & it works
~~~~~~~~~
//in the file from wich you're calling this preloader:
//picture names & filename to load
Code:
var pictures=new Array("0_.jpg" , "1_.jpg" , "2_.jpg" , "3_.jpg" , "4_.jpg" , "5_.jpg" , "6_.jpg" ), filename="mypage.html"//you're don't have to pass pictures & filename - they are
//global; but just in case:
function openPreloader(file, pictures){
var url, prefs, preloadername, navpath, navbar
preloadername="preloader.htm"
url=preloadername+'?'+pictures+'&'+file;
top.location.href=url
}
..
then, somewhere on your page call it (openPreloader):
..
<a href="javascript
penPreloader(filename,pictures)">open my graphic page</a>..
your preloader:
<html><head><title>loading pictures</title>
<script type=text/javascript>
<!--
var param2="", total=100;
onload=function(){
var first,source, arr, arr1, tempImg
var theform, formname, txtname, txt
formname="numbers"
txtname="txt1"
theform=document.forms[formname]
first=(location.search.length)?location.search:null
if (first){
source=first.substr(1,first.length-1)
arr=source.split('&')
arr1=arr[0].split(',')
total=arr1.length
theform[txtname].value=total;
for (var ii=0; ii<arr1.length; ii++){
tempImg=eval('tim'+ii+'=new Image()')
tempImg.src=arr1[ii];
tempImg.onload=function(){
total--
theform[txtname].value=total
}
}
param2=arr[1]
checker()
}
}
function checker(){
if (total==0){
top.location.href=param2
}
else setTimeout('checker()',250)
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="numbers">
<table width="100%" height="100%" border="0" cellspacing="1" cellpadding="1">
<tr align='center'><td><table><tr>
<td colspan=2>please wait a moment, loading pictures..</td></tr>
<tr><td align="right">letf to load: </td><td align="left"><input type="text" name="txt1" width=30 style="width:30" onfocus="if (blur) { blur() }"></td></tr></table>
</td></tr>
</table>
</form>
</body>
</html>
~~~~~~~~~
Victor
- Thread starter
- #3
- Status