Jquery 'do' code after 'on.change' happens

Question

I'm trying to something after an on.change happens.
I'm submitting this image throw an .on('change', function(){}) and I need to have some code running after the image is completly rendered in the browser.

So far I have this:

$('.photoimg').on('change', function (){
    $('.db_result').html('<img src="images/loader.gif" />'); 
    $('.imageform').ajaxForm({ target: $(this).closest('.child')}).submit();
    $('.db_result').delay(500).queue(function(n) {
            $(this).html('');
            n();
    });
});

I've tried this but it executes all the lines at onde before the image even beggins to render:

$('.photoimg').on('change', function (){
    $('.db_result').html('<img src="images/loader.gif" />'); 
    $('.imageform').ajaxForm({ target: $(this).closest('.child')}).submit();
    $('.db_result').delay(500).queue(function(n) {
            $(this).html('');
            n();
    });
    /////////////////////////////
    alert($(this).closest('.child').html());
    /////////////////////////////
});

What I'm looking for is something like this:

$('.photoimg').on('change', function (){
    $('.db_result').html('<img src="images/loader.gif" />'); 
    $('.imageform').ajaxForm({ target: $(this).closest('.child')}).submit();
    $('.db_result').delay(500).queue(function(n) {
            $(this).html('');
            n();
    });

}).[[afterComplete]](function(){
    alert($(this).closest('.child').html());
});

HTML [page wqith the input type file]

<div class="child" style="z-index: 70; position: absolute; top: 0px; left: 0px; width: 800px; height: 172px; cursor: default; background-color: rgba(254, 202, 64, 0.701961);" alt="reset">
   <div class="fileinput-holder" style="position: relative;"><input type="text" class="fileinput-preview" style="width: 100%; padding-right: 81px;" readonly="readonly" placeholder="No file selected...">
      <span class="fileinput-btn btn" type="button" style="display:block; overflow: hidden; position: absolute; top: 0; right: 0; cursor: pointer;">Browse...<input type="file" class="photoimg" name="photoimg" style="position: absolute; top: 0px; right: 0px; margin: 0px; cursor: pointer; font-size: 999px; opacity: 0; z-index: 999;"></span>
   </div>
</div>

PHP [file for processing the input]

...
if(move_uploaded_file($tmp, $path.$actual_image_name)) //check the path if it is fine
    {
        move_uploaded_file($tmp, $path.$actual_image_name); //move the file to the folder
        //display the image after successfully upload
        echo "<div class=\"imgh\" style=\"width:auto; height:auto;\" alt=\"reset3\"><img src='data:image/".$ext.";base64,".base64_encode(file_get_contents($path.$actual_image_name))."' style=\"width:inherit; height:inherit;  min-width:50px; min-height:50px;\" class='img_set'><div class=\"close\"><i class=\"icon-remove-sign\"></i></div></div>";
    }
else
    {
    echo "<input type='file' class='photoimg' name='photoimg'/><br/><strong style='color:red;'>Carregamento Falhou!</strong>";
    }
}
...

preload the image before the change event happens, that way you won't *need* to wait for it to render. — Kevin B, Sep 14 '13 at 23:07

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

Keep your change handler for your input form to handle changes on it, but use the load event for your image, and use that to handle code that needs to execute after the image loaded:

$('img.img_set').on('load', function (){
  //...
});

This not always reliable as it may not fire if the image has been cached.

See: jQuery callback on image load (even when the image is cached)

edited May 23 '17 at 10:25

Community

1
1

answered Sep 14 '13 at 16:11

Bjorn

69,215
39
136
164

if I change `on.change` to `on.load` nothing happens and no image is rendered in the browser – CIRCLE Sep 14 '13 at 16:27
Oh, maybe I misunderstood the question. Can you please also show the HTML? Thanks. – Bjorn Sep 14 '13 at 16:32
You need to bind the `load` handler to the `` element, not the `` element. – Barmar Sep 14 '13 at 16:45
Updated my answer based on what you are doing. – Bjorn Sep 14 '13 at 16:52
this is exactly what I need but I can't seem to have the `on.load` to fire after the image has been loaded. I'm using this test `$('img.img_set').on('load', function (){ alert(); });` – CIRCLE Sep 14 '13 at 17:31
Did you see the SO article I link to? It has information about how to make it fire. The accepted answer uses `one` and `complete` – Bjorn Sep 14 '13 at 17:39
Also if you want to be lazy you can just try a `setTimeout(..., 0);` where ... is your code to execute after the image was added. This may work since you are using data:img but I haven't tried it. – Bjorn Sep 14 '13 at 17:41

Jquery 'do' code after 'on.change' happens

1 Answers1