Отобразить данные, запрошенные вызовом ajax.load () после завершения, а не во время вызова - PullRequest
Новая
       11

Отобразить данные, запрошенные вызовом ajax.load () после завершения, а не во время вызова

0 голосов
/ 14 мая 2010

Мой код jQuery (с использованием ajax) запрашивает данные из локального php-скрипта (pgiproxy.php). Этот скрипт захватывает нужную веб-страницу. Я использую следующую функцию PHP для этого: 

function grabPage($pageURL) {
  $homepage = file_get_contents($pageURL);
  echo $homepage;
}

Затем я извлекаю html-код, который мне нужен, из возвращаемых данных, используя jQuery, и вставляю его в div с именем #BFX, следующим образом: 

$("#btnNewLoadMethod1").click(function(){
  $('#temp1').load('pgiproxy.php', { data : $("#formdata").serialize(), mode : "graph"} , function() {
    $('#temp').html( $('#temp1').find('center').html() );
    $('#BFX').html( $('#temp').html() );
  });
});

Это отлично работает. Я получаю html-данные (которые представляют собой GIF-изображения), которые мне нужно отобразить на экране в правильном формате.

Проблема в том, что я вижу загрузку html-данных в div (зависит от скорости сети), но мне нужно вставить извлеченный html-код ТОЛЬКО в #BFX, когда запрос ajax полностью завершен.

Я пытался использовать async:false и вызов $('#BFX').html( $('#temp').html() ); вне функции load (), это имело тот же эффект.

Ответы [ 3 ]

1 голос
/ 14 мая 2010

, если вы имеете в виду # temp1 - это показ div, .hide() затем .show() it 

$("#btnNewLoadMethod1").click(function(){
  $('#temp1').load('pgiproxy.php', { data : $("#formdata").serialize(), mode : "graph"} , function() {
    $('#temp').html( $('#temp1').find('center').html() );
    $('#BFX').html( $('#temp').html() );
    // find img tags... then hide it.... when image finished loading, show it..
    $('#BFX').find('img').hide().load(function(){ $(this).show(); /* this function triggers when image finish loading... */})
  })
});

.load () для изображений ... quick demo

сокращение кода может быть, это тоже будет работать .. 

$("#btnNewLoadMethod1").click(function(){
  $('<div>').load('pgiproxy.php', { data : $("#formdata").serialize(), mode : "graph"} , function() {
    $(this).find('center img').appendTo('#BFX');
    // find img tags... then hide it.... when image finished loading, show it..
    $('#BFX').find('img').hide().load(function(){ $(this).show(); /* this function triggers when image finish loading...*/ })
  })
});

это намного меньше использования элементов ...

0 голосов
/ 14 мая 2010

Спасибо @Reigel за помощь, я настроил его код так, как мне нужно: 

$("#btnNewLoadMethod2").click(function(){
  $('<div>').load('pgiproxy.php', { data : $("#formdata").serialize(), mode : "graph"} , function() {
    $('#temp').html( $('center img', this) );
    $('#temp').find('img').load(function(){ $('#BFX').html($('#temp').html() ) })
  })
});

HTML-код, полученный из вызова Ajax к pgiproxy.php, хранится в объекте jQuery $('<div>').

Используя $('#temp').html( $('center img', this) ); Я извлек нужный мне HTML и сохранил его в div с именем #temp.

Финальная строка:
$('#temp').find('img').load(function(){ $('#BFX').html($('#temp').html() ) }) привязывает событие загрузки к элементу IMG, который выполняет функцию $('#BFX').html($('#temp').html() после завершения загрузки изображения, эта функция просто копирует HTML-код из #temp div (который скрыт) в мой основной div #BFX .

Теперь, когда пользователь загружает каждое последующее изображение, все, что он видит, - это новое изображение, которое появляется поверх старого. Поскольку изображения представляют собой рыночный график, кажется, что линия графика проходит вдоль изображения.

Надеюсь, я объяснил это достаточно четко, еще раз спасибо за помощь.

0 голосов
/ 14 мая 2010

ОБНОВЛЕНИЕ: Получение HTML-кода для вставки изображения на страницу, это не то же самое, что подготовка файла. с вашим текущим методом вы просто запрашиваете код HTML (если я правильно понял), а не файл .gif.

если вы добавите новый HTML-код на страницу, браузер запросит у сервера изображение.

Вам нужно как-то предварительно загрузить изображение, а затем добавить код HTML. Вы можете выполнить поиск в Google по нескольким методам предварительной загрузки изображений.

=============================================== ==================================

Вы можете попробовать с обычным вызовом jQuery Ajax

Функция успеха выполняется после завершения загрузки ajax 

$("#btnNewLoadMethod1").click(function(){
     $.ajax({
         url: "/image/path/file.gif",
         data: $("#formdata").serialize(),
         success: function() {
                 $('#temp1').load('pgiproxy.php', { data : $("#formdata").serialize(), mode : "graph"} , 
                 function() {
                     $('#temp').html( $('#temp1').find('center').html() );
                     $('#BFX').html( $('#temp').html() );
                 });
         }
     });
});
...