Javascript loading issue, where's the problem?

Started by Biology Forums, May 21, 2016, 01:33:19 PM

Previous topic - Next topic

Biology Forums

I have this great code that displays a greeting based... It's a very plug-in-play type of script, but the issue is, the greeting message loads AFTER the page has loaded, so it appears awkward having to wait for the greeting. What can I do to make it load first?

<script type="text/javascript">
/*<![CDATA[*/
function clock()
{
// Generate time
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();

// Add preceding 0s, if required
var hours = (hours < 10 ? \'0\' : \'\')+hours;
var minutes = (minutes < 10 ? \'0\' : \'\')+minutes;
var seconds = (seconds < 10 ? \'0\' : \'\')+seconds;

// Generate formated time
var time = hours+\':\'+minutes+\':\'+seconds;

// Get where abouts in the day it is
if(hours >= 6 && hours < 12)
{
var greeting = \'Good morning\';
}
else if(hours >= 12 && hours < 18)
{
var greeting = \'Good afternoon\';
}
else if(hours >= 18 && hours < 21)
{
var greeting = \'Good evening\';
}
else
{
var greeting = \'Hello\';
}

// Display Greeting
document.getElementById(\'clock\').innerHTML = greeting;

//document.getElementById(\'clock\').innerHTML = time+\'<br />\'+greeting;
}
//init clock
window.onload = function()
{
clock();
setInterval(\'clock()\', 1000);
}
/*]]>*/
</script>
<span id="clock"></span>


I believe the problem lies here:

window.onload = function()

nend

Just put the JavaScript below the container and remove the onLoad function.

This //init clock
window.onload = function()
{
clock();
setInterval(\'clock()\', 1000);
}

To
//init clock
clock();
setInterval(\'clock()\', 1000);

Biology Forums

I tried what you recommended, and nothing showed up :(

Wellwisher

window.onload = function()

Is not the problem, all that's telling the browser is once html loads, execute the script. It's responsible for triggering the entire script, without a trigger, your script will not load (as you've found out using Nends code).

The problem is how you've set-up the script and @Nend is partially correct.

Here's how you should set up the script:



<script>
function clock()
{
// Generate time
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
setInterval(\'clock()\', 1000);

// Add preceding 0s, if required
var hours = (hours < 10 ? \'0\' : \'\')+hours;
var minutes = (minutes < 10 ? \'0\' : \'\')+minutes;
var seconds = (seconds < 10 ? \'0\' : \'\')+seconds;

// Generate formated time
var time = hours+\':\'+minutes+\':\'+seconds;

// Get where abouts in the day it is
if(hours >= 6 && hours < 12)
{
var greeting = \'Good morning\';
}
else if(hours >= 12 && hours < 18)
{
var greeting = \'Good afternoon\';
}
else if(hours >= 18 && hours < 21)
{
var greeting = \'Good evening\';
}
else
{
var greeting = \'Hello\';
}

// Display Greeting
document.getElementById(\'clock\').innerHTML = greeting;

//document.getElementById(\'clock\').innerHTML = time+\'<br />\'+greeting;
}
</script>



Now you need to trigger this code and this is how to do it:



<span id="clock" onload="clock();"></span>



Make sure you add the script before the opening <span> tag otherwise it will not work.


nend

Yeah JavaScript needs a trigger, my mistake there.

@Wellwisher, the code you suggested with the span doesn't solve the problem as it just replicates the onLoad event in a tag. ;)

I don't see any optimal solution, I do have one but it would be bad SEO wise, render blocking JavaScript.

It may be best to do this server side. ;)

Sorry can't be much assistant here, no computer access.

Wellwisher

#5
@Nend, that's an overkill man. Your two choices are:

a. wait for the entire webpage to load
b. wait for that one element to load

Now you buzz-in and tell me which will be the quickest?  :P You can have multiple onloads and it's not a problem. JS based sites use them the most. Pinterest being a good example, also many major e-com sites rely on using them and they'd use dozens.  ;D

"Onloads" basically tell Mr.Browser, once something "loads", do something.

nend

#6
Quote from: Wellwisher on May 27, 2016, 01:40:11 AM
@Nend, that's an overkill man. Your two choices are:

a. wait for the entire webpage to load
b. wait for that one element to load

Let me quote the author.

Quote from: Stylus on May 21, 2016, 01:33:19 PM
.What can I do to make it load first?

HTML standard for onLoad.
QuoteSupported HTML tags:   <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

Doing this server side isn't overkill. Unless you have a hamster powered box, until January 2038 I don't see this as an issue.

Biology Forums

You can do server-side but there's no simple way of obtaining the user's current time zone. Server side uses the server's time zone, so someone in Australia will read good morning when it's midnight, given that the server is in North America

Arantor

But you know the user's time offset... if they set it.

Wellwisher

Quote from: nend on May 27, 2016, 08:01:43 AM

HTML standard for onLoad.
Supported HTML tags:   <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>


Well I'll be damned, @Nend. This is weird and interesting. So check this: I ran some tests on the lastest browser versions of firefox and chrome.
If I use the mark-up @Stylus provided on my production site, I see a delayed greeting. Now if I use my own mark-up (be it not html standard), I see the result during the page load and see the greeting instantly. I have no idea why it's working, but it's working folks.
I also have jquery running, maybe that's doing some weird voodoo? Tbh, I am a little confused why my mark-up works.  ???

Biology Forums

Wellwisher, I put your code before the <body> and it didn't show anything. Is it possible you made a mistake?

Wellwisher

Quote from: Stylus on May 30, 2016, 01:38:05 AM
Wellwisher, I put your code before the <body> and it didn't show anything. Is it possible you made a mistake?

That's interesting, it was working when I was testing it. Did you add the script in the head tag?

The following code, you need to place where you want the greeting to show up:

<span id="clock" onload="clock();"></span>

Try that and let me know.

leghorn23

You are indeed correct. The window.onload part is unnecessary since those lines come after the actual code you're running. Remove the function and just run the things within that and you're good to go.

Biology Forums

Just tested it again and it did not work, nothing appears.

SychO

Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

Chris68

does span element have a onload event ?
According to hxxp:w3schools.com [nonactive] <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style> can fire such on event.

Have a try with <img id="clock" onload="clock();" /> to test this reason.

Wellwisher

My apologies. This is one of those days... sooooo I remember getting it working. I remember testing the script, it was loading first and displaying the greeting without a problem. Today, I re-ran the code I gave you above and the greeting (as you mentioned @Stylus) is not displaying.  ;D

I made a jsfiddle to prove it works but once I add this to my production and escape the script using "back-slash", it won't display the darn greeting.

https://jsfiddle.net/9155q0w6/4/

I have a feeling I am missing something really small and stupid which is preventing it to display. Anyway have a look at the jsfiddle, hopefully one of you nerds can figure out this cursed script.  :P I love the puzzle though.


Wellwisher

Quote from: Stylus on June 01, 2016, 07:38:06 PM
See, I'm not crazy ;)

@Stylus never said you were mate.  :P Ok so fingers crossed, try the following code. Treat it like "one snippet", add it where you want the greeting to show up. I made a div tag and put the script inside it but if you want to put it in a span tag, that should also work.

In this unorthodox method, we can be sure the html element is loaded first, and the next item to load is the script itself. This rules out any conflicts and things should work:



<div id="clock" onload="clock()">
<script>
function clock()
{
// Generate time
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();

// Add preceding 0s, if required
var hours = (hours < 10 ? \'0\' : \'\')+hours;
var minutes = (minutes < 10 ? \'0\' : \'\')+minutes;
var seconds = (seconds < 10 ? \'0\' : \'\')+seconds;

// Generate formated time
var time = hours+\':\'+minutes+\':\'+seconds;

// Get where abouts in the day it is
if(hours >= 6 && hours < 12)
{
var greeting = \'Good morning\';
}
else if(hours >= 12 && hours < 18)
{
var greeting = \'Good afternoon\';
}
else if(hours >= 18 && hours < 21)
{
var greeting = \'Good evening\';
}
else
{
var greeting = \'Hello\';
}

// Display Greeting
document.getElementById(\'clock\').innerHTML = greeting;

//document.getElementById(\'clock\').innerHTML = time+\'<br />\'+greeting;
}
//init clock

{
clock();
setInterval(\'clock()\', 1000);
}
</script>
</div>


nend

Quote from: Wellwisher on June 02, 2016, 01:05:46 AM
In this unorthodox method, we can be sure the html element is loaded first, and the next item to load is the script itself. This rules out any conflicts and things should work:

Quote from: nend on May 21, 2016, 02:59:57 PM
Just put the JavaScript below the container and remove the onLoad function.

This //init clock
window.onload = function()
{
clock();
setInterval(\'clock()\', 1000);
}

To
//init clock
clock();
setInterval(\'clock()\', 1000);

Sounds familiar.  ::)

Advertisement: