Javascript wait for image to load before calling Ajax

Question

function dropResource() {

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

    // Create the image
    $(\'#thePage\')         


        

Answer 1

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);

Answer 2

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]);