Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    May 2008
    Location
    Michigan
    Posts
    216
    Thanks
    10
    Thanked 1 Time in 1 Post

    How can I load a slow external JS after page loads?

    I have a slow loading external JavaScript that displays a calendar widget. When I put it in my sidebar, while the page loads, it cuts off where the calendar should be until the JavaScript for it finishes.

    How can I make the script load after the page finishes loading?

    I tried creating a function at the end of the HTML and calling the function in the sidebar, but I think because the function was being called before the script was executed, it didn't work.

    I appreciate any and all help!

  • #2
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Code:
    document.onload = CalenderWidget;
    Should load it once all the html has loaded, maybe not images and such. Not sure, give it a go though. Although i'd be more concerned that something as simple as a calendar widget is taking so long to load.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    It's window.onload and not document.onload

  • #4
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    I meant what I said. Waiting till the document is loaded, not the window. You can apply .onload to many things. window, document, and image are the most useful (or most used).
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #5
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Actually no, try window. Apparently it does have issues I never looked into.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #6
    Regular Coder
    Join Date
    May 2008
    Location
    Michigan
    Posts
    216
    Thanks
    10
    Thanked 1 Time in 1 Post
    In the sidebar I put

    Code:
    window.onload = function() { document.write('<script type="text/javascript" src="http://www.somewebsite.com/calendar.js"></script>'); };
    And when I refreshed the page, it showed the design for a fair second, then went to a all white screen that had nothing by the calendar.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Just forget about document.write. It is only(!) useful at the time the page is being created. Once the document is ready (or window.onload) document.write will create a new document by deleting the old one completely.

    Please use .innerHTML on existing elements or document.createElement() to create new ones "on the fly".

  • #8
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Provided that script does not use document.write:
    Code:
    window.onload = function() 
    { 
      var se = document.createElement( 'script' );
     
      se.type = 'text/javascript';
    
      se.src = "http://www.somewebsite.com/calendar.js";
    
      document.getElementsByTagName( 'body' )[ 0 ].appendChild( se );
    };

  • #9
    Regular Coder
    Join Date
    May 2008
    Location
    Michigan
    Posts
    216
    Thanks
    10
    Thanked 1 Time in 1 Post
    This did not work

    Quote Originally Posted by Logic Ali View Post
    Provided that script does not use document.write:
    Code:
    window.onload = function() 
    { 
      var se = document.createElement( 'script' );
     
      se.type = 'text/javascript';
    
      se.src = "http://www.somewebsite.com/calendar.js";
    
      document.getElementsByTagName( 'body' )[ 0 ].appendChild( se );
    };

  • #10
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by nicky View Post
    This did not work
    The code works in a test case, but as I warned there could be a document.write or something else in the third-party script that precludes it being loaded following page load.
    As I dont know what the script is or even if it's being used properly, it's not possible to comment further.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •