Javascript在调用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, 

此代码将图像添加到我的拖放区域后，一旦缩略图被放入。问题是，图像的宽度和高度出来为0， 0，因为在图像有机会加载之前调用ajax ...如果我取消注释警报，并等待图像加载完毕，那么它工作正常。

有没有办法解决这个问题？

Answer 1

我可能会重新安排事情有点：

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

什么，做的是创建img元素，勾其load事件，才把它添加到DOM（通过其追加到#thePage元素）。所有其他操作都在load处理程序中进行。请注意，我们确保在追加到DOM之前挂接load处理程序，因此load事件在我们挂接之前不会触发。

如果你真的想要小心，你甚至可以暂缓设置src属性，直到我们挂钩load之后，才能确定。当您将浏览器立即开始下载图像src属性

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

到

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

Answer 2

：要做到这一点，变化。你必须先定义一个加载事件，在它插入你的后加载代码：

$('<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]);