0

我的 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() );
  });
});

这工作正常。我得到了需要在屏幕上显示在正确 div 中的 html 数据（这是一个 gif 图像）。

问题是我可以看到 html 数据加载到 div 中（取决于网络速度），但我想要的是仅在 ajax 请求完全完成时将提取的 html 代码插入#BFX。

我尝试在 load() 函数之外使用 async:false和调用$('#BFX').html( $('#temp').html() );，效果相同。

4

3 回答 3

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()用于图像...快速演示

代码减少 也许这也可以工作..

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

这是少得多的元素使用...

于 2010-05-14T03:53:44.217 回答
0

更新：获取用于在页面上插入图像的 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() );
                 });
         }
     });
});
于 2010-05-14T03:56:20.773 回答
0

感谢@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() ) })
  })
});

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

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

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

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

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

于 2010-05-14T14:32:30.743 回答