如何确保图像已完全加载到DOM中

Question

I am integrating a cropping tool to my application. (Jcrop)

I have the following javascript integrated into the page:

$(function() {
  $("#imgInp").change(function(){
    readURL(this);
  });
});

function update_crop(coords) {
  var rx = 100/coords.w;
  var ry = 100/coords.h;
  $('#preview').css({
    width: Math.round(rx * 760) + 'px',
    height: Math.round(ry * 1000) + 'px',
    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
    marginTop: '-' + Math.round(ry * coords.y) + 'px'
  });
}

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#cropbox').attr('src', e.target.result);
      $('#preview').attr('src', e.target.result);
      $('#cropbox').Jcrop({
        onChange: update_crop,
        onSelect: update_crop,
        setSelect: [0, 0, 500, 500],
        aspectRatio: 10 / 13.15
      });

    }
    reader.readAsDataURL(input.files[0]);
 }

}

And in my HTML i have the following:

<h1>Image to load</h1>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
</form>

<img id="cropbox" src="#" alt="your image">
<h4>Preview:</h4>
<div style="width:100px; height:100px; overflow:hidden">
  <img id="preview" src="#" alt="your image">
</div>

So basically i give the user the possibility to upload a pic, then let him visualize the area to be cropped.

The problem is that when i load the first pic, it is fine, but when i load the another pic the second time, it does not change in the img#cropbox element.

So basically $('#cropbox').Jcrop event is executing before the browser changes the $("#cropbox").attr('src',e.target.result)

How can i make sure that $('#cropbox').Jcrop is executed only when $("#cropbox").attr('src',e.target.result) is executed and the image is fully loaded ?

Answer 1

Image elements also have a load event. Before setting the src attribute, wrap that function in a load event callback on that image.

$('#cropbox').load(function(){
    $('#cropbox').Jcrop({
      onChange: update_crop,
      onSelect: update_crop,
      setSelect: [0, 0, 500, 500],
      aspectRatio: 10 / 13.15
    });
});
$('#cropbox').attr('src', e.target.result);

Answer 2

Try setting an interval poll to see if the new image source matches the expected source.

The new Image source (actual) should match the expected image source (the one you set) before you continue to the JCrop.

Here is a simplified example:

function checkImageLoaded(newImg){

if (newImg == expectedImg){
     $('#cropbox').Jcrop({
        onChange: update_crop,
        onSelect: update_crop,
        setSelect: [0, 0, 500, 500],
        aspectRatio: 10 / 13.15
      });

      //clear the interval
      window.clearInterval(imageInterval);
  }
}

function pollImageSource() {

    //get the new Image source
    //set the expect Image source

    //then check if they match
    var imageInterval = setInterval(function(){ checkImageLoaded(newImageSource); }, 300);
}

There are lots of image plugins that detect if an image is loaded, but I don't think that is necessary.

Also, David Walsh has a more robust polling mechanism.

https://davidwalsh.name/javascript-polling

Excerpt:

// Usage:  ensure element is visible
poll(function() {
    return document.getElementById('lightbox').offsetWidth > 0;
}, 2000, 150);

But that might not work because your image is already loaded. You would have to heavily modify that script to compare image source as above.

Answer 3

I think you should use the image's onload event. It's fired when the browser is done rendering your image, and every time the image changes, it starts over.

Simple as a dot:

You can achieve the same with jQuery: $("img").on("load",function() {....});

(There's an earlier answer with almost the same thing, sorry)