Javascript在调用Ajax之前等待映像加载

function dropResource() { var imgIndex = getImageIndexByID(currentDragImageID); var newImgID = resourceData.length; // Create the image $('#thePage').append(''); // 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 = $(''); 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 = $(''); newImage.load(function() { // ... }); $('#thePage').append(newImage); 

至

  newImage = $(''); newImage.load(function() { // ... }); newImage[0].src = uploadFolder + '/' + imgData[imgIndex][1]; $('#thePage').append(newImage); 

Answer 2

设置src属性时，浏览器会立即开始下载图像。 您必须先定义一个load事件，然后在其中插入后加载代码：

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