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, чтобы быть действительно уверенным. Чтобы сделать это, изменение:

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

При установке свойства Src браузер начинает загружать изображение сразу. Вы должны определить событие нагрузки до того, как вставьте в него код после загрузки:

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