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属性时，浏览器会立即开始下载图像。您必须先定义一个load事件，然后在其中插入后加载代码：

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

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

2 个答案: