Reload script whenever the event happens

Question

Hi. I was looking and I couldn’t find anything related around here, so I’m coming to ask. I’m working with the one plugin 'http://tympanus.net/codrops/2014/10/30/resizing-cropping-images-canvas/', and I want to give him some functions to get him better.

I’ve already made an image upload field, but this one not from Ubmit, I’m using Filereader to upload the image. What is happening, the script of this plugin runs in 'Static' mode, IE, it goes into action as soon as the script is loaded, this way, I can not resize the photo that was rendered.

I wanted to know if there is a way to each 'change' event in the input it reload the script, so it can get the information from the image.

Answer 1

From what I saw in the previous answer, the script is loaded only once, so here follows an improvement

function loadScript(scriptName) {
        // Adiciona o script na head do documento
        var body    = document.getElementsByTagName('body')[0],
            script  = document.createElement('script');
        script.type = 'text/javascript';
        script.src  = scriptName;

        // dispara o carregamento
        body.appendChild(script);

        // Limpa a referência do DOM
        //body = null;
        //script = null;

}

Answer 2

Bruno, you can create a function to perform the search of the plugin asynchronously. This way, once the field changes, it calls the load function.

function loadScript(scriptName, callback) {
    if (!jsArray[scriptName]) {
        jsArray[scriptName] = true;

        // Adiciona o script na head do documento
        var body    = document.getElementsByTagName('body')[0],
            script  = document.createElement('script');
        script.type = 'text/javascript';
        script.src  = scriptName;

        // então vincula o evento ao callback passado
        script.onload = callback;

        // dispara o carregamento
        body.appendChild(script);

        // Limpa a referência do DOM
        //body = null;
        //script = null;

    } else if (callback) {

        // Executa o Callback
        callback();
    }

}