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

Когда вы устанавливаете свойство 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]);

Answer 2

Я бы, наверное, немного переставил вещи:

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. Обратите внимание, что мы обязательно подключаем обработчик load перед добавлением в DOM, поэтому событие 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);