Javascriptがこのコード

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画像がロードされる前にajaxが呼び出されているからです...警告を解除し、画像が完全に読み込まれるまで待ってください。

これを回避する方法はありますか？

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イベントをフック、そしてだけにして#thePage要素にそれを追加することによって（DOMに追加している：私はおそらく、物事を少し並べ替えたい

Answer 1

）。他のすべてのアクションは、loadハンドラ内で行われます。 DOMに追加する前にloadハンドラをフックしているので、loadイベントはフックする前に起動しません。

本当に慎重にしたい場合は、loadをフックするまでsrcプロパティを設定しないでください。あなたは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]);