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?
jay28leeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.