Javascript wait for image to load before calling Ajax

Question

function dropResource() {

    var imgIndex = getImageIndexByID(currentDragImageID);
    var newImgID = resourceData.length;

    // Create the image
    $('#thePage').append('<img alt="Big" id="imgA' + newImgID + '" src="' + uploadFolder + '/' + imgData[imgIndex][1] + '" class="mediaImg" />');

    // Get properties
    var imgW = $('#imgA' + newImgID).width();
    var imgH = $('#imgA' + newImgID).height();
    var imgX = $('#imgA' + newImgID).position().left;
    var imgY = $('#imgA' + newImgID).position().top;

    // Add to array (dbID, imgarrIndex, width, height, x, y)
    resourceData[newImgID] = new Array(0, imgIndex, imgW, imgH, imgX, imgY);

    //alert('artworkAjaxHandler.ashx?type=addResource&uploadID=' + currentDragImageID + '&page=' + currentPage + '&w=' + imgW + '&h=' + imgH + '&x=' + imgX + '&y=' + imgY);

    // Save this as a resource    
    $.ajax({
    url: 'artworkAjaxHandler.ashx?type=addResource&uploadID=' + currentDragImageID + '&page=' + currentPage + '&w=' + imgW + '&h=' + imgH + '&x=' + imgX + '&y=' + imgY,

This code adds an image to my drop area once the thumbnail has been dropped in. The problem is, the width and the height of the image are coming out as 0,0 because the ajax is called before the image has a chance to load... If I uncomment out the alert, and wait until the image loads fully then it works fine.

Is there anyway to get around this?

score 2 · Answer 1 · answered Feb 09 '11 at 10:25

When you set the src property the browser starts to download the image immediately. You have to define a load event prior to that at insert you post-load code inside it:

$('<img alt="Big" id="imgA' + newImgID + '" class="mediaImg" />').load(function() {

    // you can do things here, after the image loads
    var imgW = $(this).width();
    var imgH = $(this).height();
    // ...

}).appendTo('#thePage').attr('src',uploadFolder + '/' + imgData[imgIndex][1]);

score 1 · Accepted Answer · answered Feb 09 '11 at 10:22

I'd probably rearrange things a bit:

function dropResource() {

    var imgIndex = getImageIndexByID(currentDragImageID);
    var newImgID = resourceData.length;
    var newImage;

    // Create the image
    newImage = $('<img alt="Big" id="imgA' + newImgID + '" src="' + uploadFolder + '/' + imgData[imgIndex][1] + '" class="mediaImg" />');
    newImage.load(function() {
        // Get properties
        var imgW   = newImage.width();
        var imgH   = newImage.height();
        var imgPos = newImage.position();
        var imgX   = imgPos.left;
        var imgY   = imgPos.top;

        // Add to array (dbID, imgarrIndex, width, height, x, y)
        resourceData[newImgID] = new Array(0, imgIndex, imgW, imgH, imgX, imgY);

        //alert('artworkAjaxHandler.ashx?type=addResource&uploadID=' + currentDragImageID + '&page=' + currentPage + '&w=' + imgW + '&h=' + imgH + '&x=' + imgX + '&y=' + imgY);

        // Save this as a resource    
        $.ajax({
        url: 'artworkAjaxHandler.ashx?type=addResource&uploadID=' + currentDragImageID + '&page=' + currentPage + '&w=' + imgW + '&h=' + imgH + '&x=' + imgX + '&y=' + imgY,
    });
    $('#thePage').append(newImage);

What that does is create the img element, hook its load event, and only then add it to the DOM (by appending it to the #thePage element). All of the other actions take place within the load handler. Note we make sure to hook the load handler before appending to the DOM, so the load event doesn't fire before we hook it.

If you really want to be careful, you might even hold off setting the src property until after we hook load, to be really sure. To do that, change:

    newImage = $('<img alt="Big" id="imgA' + newImgID + '" src="' + uploadFolder + '/' + imgData[imgIndex][1] + '" class="mediaImg" />');
    newImage.load(function() {
       // ...
    });
    $('#thePage').append(newImage);

to

    newImage = $('<img alt="Big" id="imgA' + newImgID + '" class="mediaImg" />');
    newImage.load(function() {
       // ...
    });
    newImage[0].src = uploadFolder + '/' + imgData[imgIndex][1];
    $('#thePage').append(newImage);

@Tom: Good deal, glad that helped. Be sure to test with cached images and such (just in case) and on a wide variety of browsers. Note the bit about possibly needing to set `src` separately, I suspect you'll want to do that. — T.J. Crowder, Feb 09 '11 at 10:28
@Tom (and all): I wanted to prove to myself that an `img` created via jQuery did trigger the `load` event prior to being added to the DOM, and so I did a series of scenarios: http://jsbin.com/oduve5 And it does. I would be sure to set `src` only after adding the `load` handler. — T.J. Crowder, Feb 09 '11 at 11:11

Javascript wait for image to load before calling Ajax

2 Answers2

Linked