Page loading block and async

I have this script on my community:

<div class="smallfont">
<script type="text/javascript" src="external.php?forumids=106,162,163,107,108,109,103,104,111,112,114,115,169&amp;type=js"></script> 
<script language="" type="text/javascript">
<!--
for (x = 0; x < 10; x++)
{
document.writeln("<img class=\"inlineimg\" src=\"$stylevar[imgdir_button]/lastpost.gif\" alt=\"\" border=\"0\" /> <a href=\"showthread.php?t="+threads[x].threadid+"\">"+(threads[x].title.length > 52 ? threads[x].title.substr(0, 52) + '..' : threads[x].title)+"</a><br />");
}
//-->
</script></div>

Reading online some articles I founded that I can use <script async type="text/javascript" ... >, but if I add async to my script this stop to work. Any ideas how can I fix this? You can see the problem directly on my community: http://www.klayz.com/community/ (at the bottom of the page, when you load the page it stop the loading process when it comes to those javascripts codes that generates the links in those boxes).

You can’t use async with scripts that contain document.write or document.writeln - specifying async is telling the browser that the script does not contain those calls - which became obsolete when Netscape 4 died and so are no longer used in modern scripts. Scripts that contain those commands MUST stop loading the page until the script has run or those commands will overwrite the entire page.

Once you get rid of those obsolete calls you can move the script to the bottom of the page just before the </body> tag and then the async will not be needed.

Thank you a lot for your explanation, felgall. And how do I remove them from that script? Can you help me with this?

For simple updates to a web page from JavaScript you can give the element to be updated an id )eg id=“myid”) and then use document.getElementById(‘myid’).innerHTML = ‘something’; to update it.

For more complex updates there is the 60% or so of JavaScript that are commands specifically for updating the page.

Ok, I probably understand what you mean, but as far as I’m taking those threads links from the vBulletin’s external.php file, I don’t know if I should change that file or what else. I also have no experience with JS. Isn’t there a simple change to do to that script in order to make it work without blocking the page load?

Not if it uses document.writeln - that by definition blocks the page load as that’s how that command works.

There are no commands that I can replace it with in order to be able to use async?

Just about ANY other JavaScript commands can be used to replace it - that’s why it is obsolete. I already gave you the simplest one - there are hundreds if not millions of other more complicated options.

Thank you felgall for your reply. So, something like this should work?

<!--
for (x = 0; x < 10; x++)
{
 document.getElementById("<img class=\"inlineimg\" src=\"$stylevar[imgdir_button]/lastpost.gif\" alt=\"\" border=\"0\" /> <a href=\"showthread.php?t="+threads[x].threadid+"\">"+(threads[x].title.length > 52 ? threads[x].title.substr(0, 52) + '..' : threads[x].title)+"</a><br />");
}
//-->

I just have to change that?

Somebody can help me here?

An id is specified in HTML using id=“theID” and in JavaScript as document.getElementById(‘theID’) where theID is whatever name you decided to use for the id of the particular HTML tag.

Yes, but then… is this right?

What happened when you tried it?

<img class=\"inlineimg\" src=\"$stylevar[imgdir_button]/lastpost.gif\" alt=\"\" border=\"0\" />
 <a href=\"showthread.php?t="
+threads[x].threadid+"\">"
+(threads[x].title.length > 52 ? threads[x].title.substr(0, 52) 
+ '..' : threads[x].title)
+"</a><br />

sure doesn’t look like any id I’ve ever seen.

It doesnt work

ids should only contain letters and numbers (some browsers now accept other characters but for it to work across all browsers you should stick to those).

what is the matter about this problem?

Felgall’s example intended you to do something more like this:

document.getElementById('the_id_of_some_container').innerHTML = "<img class=\"inlineimg\" src=\"$stylevar[imgdir_button]/lastpost.gif\" alt=\"\" border=\"0\" /> <a href=\"showthread.php?t="+threads[x].threadid+"\">"+(threads[x].title.length > 52 ? threads[x].title.substr(0, 52) + '..' : threads[x].title)+"</a><br />";

I don’t understand where to get this: “the_id_of_some_container”.

You make it up out of your very own head - something descriptive of what the container you are adding it to is for is probably best.

For example

<div id="myImage"></div>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.