Call javascript file and function, when an image is clicked

Question

I am trying to run an external script that I cannot edit. Currently I am calling upon the script when the page loads. This slows my site down. I would like to instead call the javascript file and run the function when it is clicked. I made it a little faster by calling the function, when clicked. However, it still calls the javascript file because I don't know how to make it call that and the function, when clicked. I spent a few hours reading and trying to find a similar request on Google with no success.

Below you will see what I have came up with so far.

<div id="myFunctionID" style="background: url('http://example.com/button.png') repeat
 scroll 0 0 transparent; width: 100px; height: 50px; cursor: pointer; position:fixed; 
 bottom:0; left:0;">
</div>
<script type="text/javascript" src="https://externalScript.js"></script>

Please help me load the JS file and the myFunctionID, when the button image is clicked.

You will have to have your own .js file with a click handler that dynamically loads the externalScript.js and calls the appropriate function within it. — Stephen P
– Stephen P, Commented Apr 22, 2014 at 23:06
studying click handler now. Will post how I did it, if I can figure it out. Thanks — docwho
– docwho, Commented Apr 22, 2014 at 23:15
It is a bad idea to load the JS file each time the image button is clicked. — Hozikimaru
– Hozikimaru, Commented Apr 22, 2014 at 23:19
Why is it a bad idea to load the JS file, when a button is clicked. Only 1 out of 10,000 hits actually use the plugin. The plugin slows down my site; 76/100 pagespeed with the plugin and 84/100 without it per Google. — docwho
– docwho, Commented Apr 23, 2014 at 1:53

Community · Accepted Answer · 2017-05-23 12:10:30Z

1

Using javascript (Quoted from JavaScript - function to load external JS files is needed)

function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

Using jquery

$("button").click(function(){
  $.getScript("pathto/external.js");
});

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Apr 22, 2014 at 23:24

Vishnuraj V

2,8793 gold badges21 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Trufa Over a year ago

Just wanted to note that the question doesn't state the tag jquery. Also I would recommend if you want to use this, using the one function.

docwho Over a year ago

Seems like more is going on than needed. I will try to tackle the jQuery one tomorrow. Never got anything to work right for me, but it is due to my own JS ignorance.

docwho Over a year ago

Neither the JS nor the jquery worked for me. I have no errors in the console, but when clicking it doesn't load the external script. I also changed the ID of my background img div to be button. I tried with and without the # in front on the jquery too.

Collectives™ on Stack Overflow

Call javascript file and function, when an image is clicked

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related