Infinite loop in function handling asynchronous onload

Question

Here is a jquery script which triggers after a user select a file for upload (the code is a little messy for debugging). 1. After user selects a jpeg image file (f), then the image is loaded and its width and height are compared against the max allowed. 2. If image is too large, then call resize to size down. 3. Since image onload is asynchronous, a callback function afterloading(image) is called:

$(function(){
    $('#uploaded_file_file_for_upload').change(function(){
        var _URL = window.URL || window.webkitURL;
        var img; 
        var max_width = 0; 
        var max_height = 0; 
        var max_size_mb;
        var f = $(this)[0].files[0];  
        if (f != null) {
          max_width = $('#max_width').val();
          max_height = $('#max_height').val();
          max_size_mb = $('#max_size_mb').val();
          alert(max_width +', ' + max_height);
          $('#file_name').val(f.name);
          alert(f.name);
          $('#file_size').val(f.size/1024);
          $('#file_type').val(f.type);  //image/jpeg
          $('#file_extension').val(f.name.split('.').pop().toLowerCase());
          alert(f.type);
          alert(f.name.split('.').pop().toLowerCase());
          if (f.type == 'image/jpeg') {
            img = new Image();
            img.onload = function () {
              afterloading(this);
              return false;
            };
            img.src = _URL.createObjectURL(f);
          };
        };


    function afterloading(image) {
        var w = image.width, h = image.height;
        alert('hi-max' + max_width + ' -- ' + max_height);
        alert('hi' + w + ' xx ' + h);
        if (w > max_width || h > max_height) {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               img.src = _URL.createObjectURL(f);
          if (w > max_width){
            h = Math.ceil(h * max_width / w);
            w = max_width;
          } else if (h > max_height) {
            w = Math.ceil(w * max_height / h);
            h = max_height;
          };
          alert('before resize, ' + w + ' ?? ' + h );
          resize(image, w, h); 
          $('#remove').val('true');
          return false;
        };
    };

    function resize(image, width, height) {
        alert('resize');
      var mainCanvas = document.createElement("canvas");
      mainCanvas.width = width;
      mainCanvas.height = height;
      var ctx = mainCanvas.getContext("2d");
      ctx.drawImage(image, 0, 0, width, height);
      $('#uploaded_file_hidden_file').val(mainCanvas.toDataURL("image/jpeg")); 
      $('#file_size').val(image.size/1024);
      alert($('#file_size').val());
      alert("++" + image.size);
      return false;
    };

    return false;

});
});

The problem is that the execution of afterloading(image) causes infinite loop. What could cause the infinite loop?

UPDATE:

There is the same infinite loop after commenting out the resize(image, w,h) in afterloading. So the problem is within afterloading itself.

afterloading calls resize which updates #uploaded_file_hidden_file which triggers change() on #uploaded_file_hidden_file which calls afterloading... — Gabe Moothart
– Gabe Moothart, Commented Nov 23, 2015 at 6:16
Gabe Moothart, the .change is on another id of file_for_upload and is not on hidden_file. — user938363
– user938363, Commented Nov 23, 2015 at 18:02

Grigor · Accepted Answer · 2015-11-23 06:11:02Z

2

I am just speculating here, since you haven't provided jsfiddle with the code above, but what is img loading here, and when is it loaded?

img = new Image();
img.onload = function () {
  afterloading(this);
  return false;
};

afterloading is expecting an image object, and it seems to be in f. Try passing in f to afterloading to see if it works, given what you have above should do what you want.

EDIT:

Also it looks like this in afterloading is the scope of the img object you just created above, which is empty.

answered Nov 23, 2015 at 6:11

Grigor

4,06910 gold badges44 silver badges80 bronze badges

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

2 Comments

user938363 Over a year ago

The alert returns the width and height of the img within afterloading. img must be present. Also if img is empty, then the if loop in afterloading will be skipped entirely.

user938363 Over a year ago

When passing f instead of this in afterloading, the alert shows undefined for both image width and height.

Avinash Jain · Accepted Answer · 2015-11-23 17:10:54Z

1

This line $('#uploaded_file_hidden_file').val(mainCanvas.toDataURL("image/jpeg")); in the resize() function keep posting same image again and again to server and keep calling resize() from afterloading().

Try removing this and check

answered Nov 23, 2015 at 17:10

Avinash Jain

7,6862 gold badges29 silver badges40 bronze badges

1 Comment

user938363 Over a year ago

Commented out the line and re-start the server. The problem is the same. This line only assigns a string to the hidden_file element.

Collectives™ on Stack Overflow

Infinite loop in function handling asynchronous onload

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related