Почему этот первый фрагмент кода вызывает запуск image.onload, а второй - нет?

Question

function SetImage(planViewCanvas, context, componentID) {
    var img = new Image();

    img.onload = function () {
        alert("Fired!!");
        planViewCanvas.width = img.width;
        planViewCanvas.height = img.height;
        context.drawImage(img, 0, 0, img.width, img.height);
        $('#NoPlanViewImage').hide();
    }

    $.ajax({
        url: '../PlanView/RenderFloorPlanImage',
        data: { ComponentID: componentID },
        datatype: 'json',
        success: function (imageSource) {
            if (imageSource !== "") {
                img.src = '../PlanView/RenderFloorPlanImage?ComponentID=' + componentID;
            }
        }
    });
}

Это вызывает запуск img.onload.Тем не менее:

$.ajax({
    url: '../PlanView/RenderFloorPlanImage',
    data: { ComponentID: componentID },
    datatype: 'json',
    success: function (imageSource) {
        if (imageSource !== "") {
            img.src = imageSource;
        }
    }
});

Изменение запроса AJAX ST Я установил src для возвращаемых данных, это не пойдет.Я хотел бы установить изображение, не возвращаясь к своему контроллеру второй раз, но я также хотел бы вызвать событие onload, когда изображение полностью загружено.Как это достижимо?

    public ActionResult RenderFloorPlanImage(int componentID)
    {
        PlanViewComponent planViewComponent = PlanViewServices.GetComponentsForPlanView(componentID, SessionManager.Default.User.UserName, "image/png");

        MemoryStream memoryStream = null;

        if (!Equals(planViewComponent, null))
        {
            FloorPlan floorPlan = GetDesktopFloorPlan(planViewComponent);

            // get the floor plan for the desktop...
            if (!Equals(floorPlan, null) && !Equals(floorPlan.Image, null) && floorPlan.Image.Length > 0)
            {
                memoryStream = new MemoryStream(floorPlan.Image);
            }
        }

        return !Equals(memoryStream, null) ? File(memoryStream, "image/png") : null;
    }

Я думаю, что лучшим вопросом может быть "Как загрузить файл в изображение?"Кажется, это происходит автоматически, когда я устанавливаю атрибут src, но не автоматически, когда я получаю указатель на результат.

Answer 1

Ваш браузер может не загружать изображение, поэтому onload не запускается.

Атрибут src= должен иметь значение URI , а не необработанные данные PNG. Подумайте, что случится с файлом HTML, если вы поместите туда необработанный файл PNG. Не удивительно, что он ломается.

Вы можете в некоторой степени обмануть читателя, используя Base64-кодировку изображения и используя так называемый data: url. Я не уверен, насколько хорошо кросс-браузерная поддержка для этого. Из того, что я прочитал, Internet Explorer <= 7 будет <em>не работать.

Answer 2

Вы транслируете двоичный файл изображения. Это не может быть установлено как SRC в вызове AJAX. Сервер отправит MIME-тип, а затем отправит файл в потоковом режиме. Вызов Ajax ожидает PATH, тогда браузер сам захватит файл.

т.е. запрос ожидает текст / HTML в качестве ответа, но вместо этого получает неожиданный заголовок MIME изображения + двоичные данные.