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

Question

Данные запроса 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), которые мне нужно отображать на экране в правильном div.

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

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

Answer 1

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

$("#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...*/ }) 
    }) 
}); 

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

Answer 2

UPDATE: Получение 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()); 
       }); 
     } 
    }); 
}); 

Answer 3

Благодаря @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 ,

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

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