Javascript的等待图像调用Ajax的前加载

问题描述

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,

这code增加了一个图像到我的拖放区域，一旦缩略图已被删除，但问题是，在宽度和图像的高度被说成0,0因为Ajax是图像之前被称为有一个机会来加载...如果我取消了警报，并等待加载图像完全然后正常工作。

This code adds an image to my drop area once the thumbnail has been dropped in. The problem is, the width and the height of the image are coming out as 0,0 because the ajax is called before the image has a chance to load... If I uncomment out the alert, and wait until the image loads fully then it works fine.

反正是有解决这个问题？

Is there anyway to get around this?

推荐答案

我可能会重新安排事情有点：

I'd probably rearrange things a bit:

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 元素，勾其负荷事件，然后才将其添加到DOM（通过其附加到 #thePage 元素）。所有其他行动采取负荷处理程序中。注意：我们要确保追加到DOM前勾负荷处理程序，因此负荷事件之前不火我们把它挂。

What that does is create the img element, hook its load event, and only then add it to the DOM (by appending it to the #thePage element). All of the other actions take place within the load handler. Note we make sure to hook the load handler before appending to the DOM, so the load event doesn't fire before we hook it.

如果你真的要小心了，你甚至可以推迟设置的src 属性，直到经过我们挂钩负荷，要真正确定。为了做到这一点，更改：

If you really want to be careful, you might even hold off setting the src property until after we hook load, to be really sure. To do that, change:

    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的前加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！