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