2010-05-13 1 views
1

Я использую следующий код:задержки отображения изображения загружаются с помощью 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 !!!"); 
      } 
    }); 

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

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

+1

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

+0

привет, danny, спасибо за ответ, я попробовал использовать .load(), но с теми же результатами, я все еще вижу любые возвращаемые данные отображаются при загрузке. – niczoom

ответ

2

.load() использование нагрузки на событие <img>

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

quick demo см коды

+0

спасибо за ответ, мне нравятся демоверсии, а также «JS Bin», я никогда не видел это раньше, мне нравятся параметры кода/предварительного просмотра. Мне нравится идея скрываться, а затем показывать полную загрузку. У вас есть некоторые идеи, чтобы сохранить исходное изображение, а затем показать новое изображение после завершения загрузки. Благодарю за вашу помощь, Ник. – niczoom

0

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

+0

hi nikita, изображение извлекается из данных, полученных из вызова ajax, с помощью «.find ('center'). Html();" (поскольку изображение встроено в тег html

), как только у меня есть этот html данные i затем вставляют в Div, называемый #BFX, ни на одном этапе не запускается событие $ (img) .load(). – niczoom

Смежные вопросы