Динамически создаваемое изображение не отображается при обновлении src <img>, чтобы указать на него

Question

У меня есть функция JavaScript

generateGraph() {
    ...
    jQuery.get('chart.php?month='+month+'&year='+year);
    document.getElementById('graph').src = 'charts/'+month+'_'+year+'.png';
    ...
}

, который называется onChange. Он в основном создает, если не существует, или обновляет, если он уже существует, изображение PNG (с использованием первой строки выше) и предположительно отображает сгенерированное изображение (с использованием второй строки выше).

Первая строка работает, а вторая - нет. Это означает, что изображение генерируется, но вторая строка не может отображать изображение, пока страница не будет перезагружена или если изображение, на которое ссылаются, уже существовало до загрузки страницы (то есть 1-я строка просто «обновила» изображение)

Есть идеи, почему это так и как это исправить?

Заранее большое спасибо за помощь!

Answer 1

Попробуйте это:

generateGraph() {
    ...
    jQuery.get('chart.php?month='+month+'&year='+year, function() {
        document.getElementById('graph').src = 'charts/'+month+'_'+year+'.png';
        // as mentioned by others this also works and is in the jquery style:
        // $("#graph").attr("src", "charts/" + month + "_" + year + ".png");
    });
    ...
}

Если я все правильно понимаю, вызов chart.php генерирует изображение на charts/month_year.png. Если это правильно, ваш исходный код отправил запрос на изображение сразу после отправки запроса на создание этого изображения. Это не дает серверу достаточно времени для создания и публикации изображения на charts/month_year.png, поэтому ничего не появилось.

Answer 2

Обновите src в успешном обратном вызове $ .get, чтобы обеспечить его выполнение после завершения запроса:

generateGraph() {
    ...
    jQuery.get('chart.php?month='+month+'&year='+year, function() {
        jQuery('#graph').attr("src",'charts/'+month+'_'+year+'.png');
    });

    ...
}

Answer 3

Вы можете решить эту проблему, создав изображение, которое никогда не отображается.Это загрузит файл изображения.Затем, когда это изображение загружено, замените его на странице с загруженным изображением:

var newImage = new Image();
newImage.onload = function(){
    // Update existing image src on your page
    }
}
newImage.src = "URL to your image";

Answer 4

Похоже, что процесс создания вашего изображения занимает ненулевое время, и назначение src сразу после вызова jQuery просто не подходит по времени, чтобы подготовить изображение, и после перезагрузки страницы изображение наверняка готово. Поэтому добавьте некоторую AJAX-проверку готовности к созданию образа.