javascript - Executing or reloading a script after another sript was loaded -

i've written code have choice between images , when click on 1 of them appears in placeholder:

home.php

<div id="templates" class="row">             <?php             while ($one = $templates->fetch()) {                 ?>                 <div class="col-xs-3 col-md-2">                     <a  class="thumbnail" data-price="<?= $one['price'] ?>" data-id="<?= $one['id'] ?>">                         <img id="imgtemp" onclick="changeimage('../files/templates/blank/<?echo($one['id'])?>.jpg');changesize();" src="/files/templates/example/<?= $one['id'] ?>.jpg" alt="<?= $one['titlep'] ?>">                     </a>                 </div>             <?php             }             ?>         </div>         <div>             <img id="imgdisp" src="../files/test/red-panda.jpg" alt="red panda" class="mask" datamask="../files/test/1.png">         </div> 

those images loaded using these 2 functions:

function changeimage(imgname) {     image = document.getelementbyid('imgdisp');     image.src = imgname; }  function changesize() {     document.getelementbyid('imgdisp').setattribute("datamask","../files/test/2.png"); } 

changeimage used take chosen image , place in new div while changesize used set attribute "datamask". datamask in turn used script in canvasmask.js , sets mask on image (e.g. square, triangle, etc.). now, when choose image, no mask applied guessing function in canvasmask.js executed before others. can done executed after?

try execute changesize() callback of changeimage. if don't know how it, there's tuto it:

https://stackoverflow.com/a/2190872/2602940