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處理程序中進行。 請注意，在添加到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);