Pre-load javascript
Question
I have a script to load the time and date, etc. I have the result load into a div, and that div has an enter CSS3 animation. The only problem is is that it takes a few seconds for the time and date to actually load and it just suddenly appears. Since you don't see it immediately when you load the page, you don't even see the animation because it's over by the time the script loads.
So my question is: is it possible to delay the page load until after the time and date script has loaded?
Disclaimer: This is a purely experimental/creative project I'm working on so I'm not worried about efficiency.
Script:
<script>
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<div class='ref'><span>"+hours+":"+minutes+"</span> "+dn+"</div>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+""
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("time-date").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
</script>
HTML:
<body onLoad="goforit()">
<div id="time-date"></div>
</body>
3 answers
solution1
1 ACCPTED 2011-06-29 18:35:27
Your code explicitly waits one second before loading the data. You should place an immediate call to getthedate() before the setInterval() statement:
if (document.all||document.getElementById)
getthedate()
setInterval("getthedate()",1000)
}
This may obviate the need to block page loading. If this is not sufficient, you will want to place your code inline rather than calling it via onload which only runs after the entire page has been loaded.
solution2
0 2011-06-29 18:35:49
You are calling the script from the body onload event, so by definition it will wait until the page has fully loaded.
If you wish the script to run earlier, you can place a script tag inside the HTML that calls the goforit() function at the position in parsing you wish, but the result may not be much better.
<div id="time-date"></div>
<script type='text/javascript'>
goforit();
</script>
solution3
0 2011-06-29 18:35:52
put this script below your div. Your div must load before it executes the script.
<script type='text/javascript'>
goforit();
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.