[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 235
  • Last Modified:

How do I speed up page loading with external javascript remote content retrieval?

I have a static html page with nested structure of table elements.

I got a piece of advertising code in javascript for inserting in the middle of my page.

The javascript loads external remote content.

However, when ever firefox is parsing to the javascript code, the page display paused for 1~2 seconds for the content to load before displaying the rest of my web content.

Is there a solution, maybe a <div> tag or something so that I can get my page loaded first without waiting for the external javascript content retrieval?
0
jay28lee
Asked:
jay28lee
  • 6
  • 5
1 Solution
 
leakim971PluritechnicianCommented:
you can load the javascript after page load :
<script>
window.onload = function() {
   var s = document.createElement("script");
   s.src = "http://www.external.domaine.com/path/to/javascript/file.js";
   document.getElementsByTagName("head")[0] = s;
}
</script>

Open in new window

0
 
jay28leeAuthor Commented:
Do I place the above javascript code between the <head></head> or simply replace this piece of code with my original javascript code, which is like <script src="http://url.com/script?id=parameter"></script>?

Because the script is actually going to display advertising content, I also need to consider its output placement.
0
 
leakim971PluritechnicianCommented:
yes replace it with :
<script>
window.onload = function() {
   var s = document.createElement("script");
   s.src = "http://url.com/script?id=parameter";
   document.getElementsByTagName("head")[0] = s;
}
</script>

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
jay28leeAuthor Commented:
nothing gets displayed.

could there by a typo from your code?

i simply copy and paste and replace the s.src url between the quotation marks.

thanks.
0
 
leakim971PluritechnicianCommented:
oh yes, you right, the code corrected :
<script>
window.onload = function() {
   var s = document.createElement("script");
   s.src = "http://url.com/script?id=parameter";
   document.getElementsByTagName("head")[0].appendChild(s);
}
</script>

Open in new window

0
 
jay28leeAuthor Commented:
this time it loads, but completely redirect my entire web page to the s.src url.

by the way, since my page has google analytics already using var s, i replaced the 3 occurrences of s with another variable abc, this won't make a different right?
0
 
leakim971PluritechnicianCommented:
right
0
 
jay28leeAuthor Commented:
but still, the code makes the entire page redirected to the s.src url, instead of placing the content of the s.src within my calling page.

what else can be wrong in the coding?
0
 
leakim971PluritechnicianCommented:
your script do something that don't allow you to insert after page load, I don't know why
0
 
jay28leeAuthor Commented:
do you know what can possibly be on the external script that's causing this issue?  i might need to talk to the other party where the script is hosted.

i researched a bit, and simply adding a defer tag should do the job.  <script defer="defer" src="url"></script>

however, simply with the addition of this defer tag, it's causing the same redirection issue.
0
 
jay28leeAuthor Commented:
is it possible for me to place a <div> tag place holder at where the original javascript position.

and then move the script itself to the bottom of the page right before the closing </body so that the script starts after my page is finished loading?

how can this be implemented?
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now