Javascript loading

Question

I noticed an error, when Twitter was down like 20 minutes a few days ago. In some browsers, my page wouldn't entirely load, because it couldn't load the twitter feed. Of course, I don't want my uptime to be depending on the uptime of Twitter so I want to fix this. When I checked out the code of my wordpress theme I found that it's loading javascript on the middle of the page. That's why it probably got stuck, since it couldn't download the right files? Here is the code:

<a href="http://twitter.com/<?php echo $username ?>" class="twitter-link"></a>
            <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
            <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<?php echo $username ?>.json?callback=twitterCallback2&amp;count=<?php echo $postcount ?>"></script>

Of course there is a lot more code to this widget, but I believe this is the important part. Can I split this up that the loading is done at the bottom of the page? That way the visitor can still see my webpage right?

Thanks!

You may want to load the scripts at the end of the head tag, perhaps - good question! — starbeamrainbowlabs
– starbeamrainbowlabs, Commented Jul 29, 2012 at 13:57
@starbeamrainbowlabs so his users will see a blank page instead of half a page ? — Vatev
– Vatev, Commented Jul 29, 2012 at 13:59
Either that or put it at the end of the body - One script shouldn't hold the the whole page up, should it? — starbeamrainbowlabs
– starbeamrainbowlabs, Commented Jul 29, 2012 at 14:09
If you put it on the bottom of the body the page will load (mostly) but the document ready still won't fire. The only way to make sure your page will fully work independent of 3-rd party scripts is to load them dynamically after your page is loaded (after document ready). — Vatev
– Vatev, Commented Jul 29, 2012 at 14:20

kzh · Accepted Answer · 2012-07-30 12:14:14Z

1

You could try adding either the async or defer attributes to your <script> elements.

e.g.

<script async src="..."></script>

or

<script defer src="..."></script>

If you prefer XHTML:

<script async="async" src="..."></script>

or

<script defer="defer" src="..."></script>

edited Jul 30, 2012 at 12:14

answered Jul 29, 2012 at 14:23

kzh

20.8k13 gold badges77 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related