How to wait to finish loading page on button click using JavaScript/JQuery?

I am having an Anchor link, on click of Anchor link, I am registering new JavaScript file html page.

On registering the JavaScript file dynamically, document is reloaded partially (As I see reload icon in browser for some time).

I want to call my JavaScript function once the script got registered (Obviously when reload icon get stopped in the browser). But the function MyJavaScriptFunction got called while document is still reloading.

Using setTimeOut resolves the issue but I don't want to use it as page loading time is not fixed. Please help.

The code I am using is as follow:

function addScriptDynamically(src, callback) {
    var s = document.createElement('script');
        s.setAttribute('src', src);
        s.onload = callback;
        document.body.appendChild(s);
}

addScriptDynamically('URL Of JS File',function(){

    MyJavaScriptFunction();
})

What I tried so far...

Option-1:

addScriptDynamically('URL Of JS File',function(){
    $(document).ready(function(){
        MyJavaScriptFunction();
    });
})

Option-2:

addScriptDynamically('URL Of JS File',function(){
    $(window).load(function(){
        MyJavaScriptFunction();
    });
})

Upvotes: 2

Views: 5070

Answers (1)

aMighty
aMighty

Reputation: 283

jquery has a function for this purpose.

Using jquery

$(function () {
 //write your function code here.
})

This function is called only when the content of the page are first loaded.

2) Using Javascript

window.onload = function(){
 //write your function code here.
}

Upvotes: 4

Related Questions