13

I have a webpage with mostly basic HTML on it. There is one section where I load an RSS feed using JavaScript pulling from an external source (url). The problem is that my page will load everything up until that script, wait for the script to load (sometimes up to a few seconds), then load the rest of the page.

How can I force it to load the script after it has rendered the entire page first?

My code is something like this:

<html>
<more html>
<script language="JavaScript" src="http://..." type="text/javascript"></script>
<more html>
...
Levi Botelho
  • 24,626
  • 5
  • 61
  • 96
wahle509
  • 666
  • 3
  • 9
  • 22
  • Place the script at the bottom, or use async loading. – adeneo Dec 12 '12 at 18:54
  • @Cthulhu I'm pretty sure it's the opposite. The browser parses from top to bottom, and waits for the script to load. Otherwise, how else do you expect code immediately after a library that uses it to run? The browser won't wait for an image's URL to resolve and load though – Ian Dec 12 '12 at 18:56
  • 1
    @Cthulhu, they load in order and block the rest of the page. If they didn't the required libraries of another library might cause problems. For example, a small jQuery plugin would get loaded before jQuery. – gpojd Dec 12 '12 at 18:56
  • 1
    Are you sure nothing immediately needs to use the Javascript library? If nothing does, use `defer` or `async` attributes on the script tag – Ian Dec 12 '12 at 18:57
  • 1
    @Cthulhu, most do, because parsing cannot continue until synchronous undeffered scripts run. There's no way to correctly parse `Hello, World!` without executing the script tag. – Mike Samuel Dec 12 '12 at 18:58
  • My mistake :) Was thinking something else entirely. (removed incorrect comment that said `most browsers don't wait for the script to load`.) – Anirudh Ramanathan Dec 12 '12 at 19:00
  • Both "defer" and "async" fail to load the script. The entire page is rendered, but no RSS feed is displayed – wahle509 Dec 12 '12 at 19:14

5 Answers5

11

Two options:

  1. Put your script block at the end of the page. This is good practice anyways due to the fact that your page strucutre will load before the script that is intended to manipulate it. Because the user generally notices the page loading but not the script, this gives the appearance of a faster load overall.
  2. Include the defer attribute in the opening script tag. Note that defer can only be used on external script files (those with an src attribute). See https://developer.mozilla.org/en-US/docs/HTML/Element/script.
Levi Botelho
  • 24,626
  • 5
  • 61
  • 96
  • 1. I have it at a certain part of my page because I want it to be displayed there. If I were to put it at the bottom, it would not be in the right place. 2. Both "defer" and "async" fail to load the script. The entire page is rendered, but no RSS feed is displayed. – wahle509 Dec 12 '12 at 19:10
  • Is your script externally referenced? – Levi Botelho Dec 12 '12 at 19:11
  • Yes, I have "src" pulling in a url location for the RSS feed. – wahle509 Dec 12 '12 at 19:15
  • Can you not pull the input into a variable? If you referenced the RSS directly you could use something like this http://stackoverflow.com/questions/226663/parse-rss-with-jquery and then update an element of your choosing with the content. This would allow you to move the script tag. – Levi Botelho Dec 12 '12 at 19:19
4

Add the defer attribute to the script tag in the head also works

<script language="JavaScript" src="http://..." type="text/javascript" defer></script>

Reference link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer

n3k0
  • 577
  • 14
  • 40
Amit Creation
  • 126
  • 1
  • 9
1

A pretty reliable way to make a script load after pageload is to write out the script include itself in javascript.

var theScript = document.createElement("script");
theScript.setAttribute("type","text/javascript");
theScript.setAttribute("src","//www.mysite.com/script.js");
document.getElementsByTagName("head")[0].appendChild(theScript);
Alkanshel
  • 4,198
  • 1
  • 35
  • 54
1

You could try wrapping the function that calls the feed in 

jQuery(window).load(function(){
//embed RSS feed 
});

forcing it to load last.

Shayna Diamond
  • 23
  • 3
0

Move your script tag to the end and it will load after everything else. For example: 

<html>
  <more html>
  <more html>
  <script language="JavaScript" src="http://..." type="text/javascript"></script>
</html
gpojd
  • 22,558
  • 8
  • 42
  • 71