Задержка отображения изображения, загруженного с помощью jquery + ajax

Я использую следующий код:

   $.ajax({
        url: "pgiproxy.php",
        data: ({ data : $("#formdata").serialize(), mode : "graph"}),
        success: 
            function(result){
                var temp = $('<div/>').html(result);
                var val = temp.find('center').html();
                $('#BFX').html(val);
            },
        error:
            function(){
                $("#error").html("ERROR !!!");
            }
    });

«Результатом» ajax-вызова «pgiproxy.php» является целая веб-страница (возвращается в виде строки), затем она преобразуется в объект jQuery и сохраняется в «var». Затем я извлекаю нужные мне данные (изображение .gif), используя .find(), который хранится в 'val'. Затем это изображение вставляется в div #BFX для отображения.

Моя проблема заключается в том, что каждый раз, когда я нажимаю кнопку, чтобы обновить это изображение, оно показывает загрузку изображения сверху вниз по мере его чтения из Интернета. Есть ли способ отображать это изображение только после его полной загрузки, чтобы пользователь не видел загрузку изображения и видел только мгновенное изменение изображения.


image jquery ajax delay
person niczoom    schedule 13.05.2010    source источник
comment
Это не ответ на ваш вопрос, но вы смотрели на .load()? это сокращение от того, что вы пытаетесь сделать выше. : $('#result').load('ajax/test.html #container'); Дополнительная информация здесь: api.jquery.com/load Что касается вашего вопроса, пытались ли вы вытащить изображение через ajax, а затем вставить его? (Я имею в виду еще один ajax-вызов URL-адреса изображения после того, как вы получите URL-адрес из разметки, возвращенной вашим первым вызовом) HTH   -  person DannyLane    schedule 13.05.2010
comment
привет, Дэнни, спасибо за ответ, я пытался использовать .load(), но с теми же результатами, я все еще вижу, что любые возвращаемые данные отображаются во время загрузки.   -  person niczoom    schedule 14.05.2010

Ответы (2)


arrow_upward
2
arrow_downward

используйте .load() load-event на <img>

сначала скрыть изображение, а затем показать его после завершения загрузки...

краткая демонстрация см. коды

person Reigel    schedule 14.05.2010
comment
спасибо за ответ, мне нравятся демо, а также «JS Bin», я никогда раньше его не видел, мне нравятся параметры кода / предварительного просмотра. Мне нравится идея скрывать, а затем показывать после завершения загрузки. У вас есть идеи, чтобы сохранить исходное изображение, а затем показать новое изображение после завершения загрузки. Спасибо за помощь, Ник. - person niczoom; 14.05.2010

arrow_upward
0
arrow_downward

Вы можете сделать все это вручную: загрузить изображение в фоновом режиме, а затем вставить его на страницу. Есть несколько статей, подробно обсуждающих эту тему, включая эту:
http://jqueryfordesigners.com/image-loading/

person Nikita Rybak    schedule 13.05.2010
comment
привет Никита, изображение извлекается из данных, полученных от вызова ajax, с помощью .find('center').html(); (поскольку изображение встроено в тег html ‹center›), когда у меня есть эти html-данные, я затем вставляю их в Div с именем #BFX, ни на каком этапе не было запущено событие $(img).load() .. - person niczoom; 14.05.2010