Question

我的jQuery代码（使用ajax）请求来自本地php脚本（pgiproxy.php）的数据。此脚本抓取所需的网页。我正在使用以下php函数：

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

然后我使用jQuery从返回的数据中提取我需要的html代码，并将其插入到名为#BFX的div中，如下所示：

$("#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中（取决于网络速度），但我想要的是在ajax请求完全完成时将提取的html代码插入到#BFX中。

我试过用 async:false并在load（）函数外调用$('#BFX').html( $('#temp').html() );，这具有相同的效果。

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

更新：获取用于在页面上插入图像的HTML，这与准备文件不同。使用您当前的方法，您只需要HTML代码（如果我理解的话），而不是.gif文件。

如果您将新HTML附加到页面中，那么浏览器将向服务器询问图像。

您需要以某种方式预加载图像，然后附加HTML代码。您可以在谷歌上搜索有关如何预加载图像的几种技术。

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

您可以尝试使用普通的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() ) })
  })
});

从Ajax调用pgiproxy.php收到的HTML存储在jQuery对象$('<div>')中。

使用$('#temp').html( $('center img', this) );我提取了我需要的HTML并将其存储在名为#temp的div中。

最后一行：
$('#temp').find('img').load(function(){ $('#BFX').html($('#temp').html() ) })将加载事件绑定到IMG元素，该元素在图像加载完成后运行函数$('#BFX').html($('#temp').html()，此函数只复制来自#temp div的HTML（隐藏）进入我的主要分区#BFX。

现在，当用户加载每个连续图像时，他们看到的只是新图像显示在旧图像的顶部。由于图像是市场图形，因此图形线似乎沿着图像绘制。

希望我能够清楚地解释清楚，再次感谢您的帮助。

完成后显示ajax.load（）调用请求的数据，而不是在调用期间

3 个答案: