简体   繁体   English

预载javascript

[英]Pre-load javascript

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.我有一个脚本来加载时间和日期等。我将结果加载到一个 div 中,并且该 div 有一个输入 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.由于您在加载页面时没有立即看到它,因此您甚至看不到 animation,因为它在脚本加载时已经结束。

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: HTML:

<body onLoad="goforit()">
   <div id="time-date"></div>
</body>

Your code explicitly waits one second before loading the data.您的代码在加载数据之前显式等待一秒钟。 You should place an immediate call to getthedate() before the setInterval() statement:您应该在setInterval()语句之前立即调用getthedate()

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.如果这还不够,您将需要将代码内联而不是通过仅在整个页面加载后运行的onload调用它。

You are calling the script from the body onload event, so by definition it will wait until the page has fully loaded.您正在从body onload事件调用脚本,因此根据定义,它将等到页面完全加载。

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.如果您希望脚本更早运行,您可以在 HTML 中放置一个脚本标签,该标签在 position 处调用goforit() function,但结果可能不会更好

<div id="time-date"></div>
<script type='text/javascript'>
  goforit();
</script>

put this script below your div.将此脚本放在您的 div 下方。 Your div must load before it executes the script.您的 div 必须在执行脚本之前加载。

<script type='text/javascript'>
goforit();
</script>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM