Javascript：检测图像的加载状态，只有当新图像“加载”时才会换出旧图像？

我打电话给一个为我生成图形图像的PHP脚本，但是这需要几秒钟的时间。有没有一种方法来检测何时加载完成，在用户端，只有在php脚本完成并且图像准备就绪时才将其与旧映像交换。Javascript：检测图像的加载状态，只有当新图像“加载”时才会换出旧图像？

这里是JavaScript函数我用它来调用PHP脚本：

EDIT（CODE修订版）

function loadGraph(self,graph,varID) { 
    var img = new Image(); 

    img.onload = function() { 
     $(self).parents().parents().siblings(".graph_container").empty().append(img); 
    }; 

    img.src = 'drawGraph.php?type=journey_report&amp;graph=' + graph + 
     (varID != null ? '&amp;varID=' + varID : '') + '&amp;companyID=<?php echo $_SESSION['companyID'] ?>'; 
}

，这里是一个使用该函数的图形容器和链接：

<div class="graph_container"> 
         <img src="drawGraph.php?type=journey_report&graph=outOfDate_vs_upToDate&companyID=<?php 
          echo $_SESSION['companyID'] ?>" /> 
        </div> 

        <div class="reportItemWrapper"> 
         <div class="reportItem"><a href="#" onclick="loadGraph(this,'outOfDate_vs_upToDate'); return false"><b>Total</b></a></div>

谢谢！

来源

2010-07-29 Garrett

我很困惑;那东西不行吗？我承认我没有尝试过......如果有错误或者让我知道，我会看看我能做什么！ – Pointy 2010-07-29 18:26:34

创建一个Image对象并将其“onload”处理程序设置为一个函数，该函数在第一个代码块中执行您的操作。然后将其“src”属性设置为您的URL。

var img = new Image(); 
img.onload = function() { 
    // that jQuery stuff 
}; 
img.src = "drawGraph.php?type=journey_report ...";

现在，只有当URL可缓存时，它才会有效。如果没有，那么你可以重新工作该jQuery代码，以便将Image元素填充到DOM中。

$(self).parents().parents().siblings(".graph_container").empty().append(img);

（你还是会做，在onload处理。）

来源

2010-07-29 18:13:20 Pointy

我更新了我的代码，但是现在我得到一个空白图表= S – Garrett 2010-07-29 18:25:47

嗯，好吧 - 那么，您能否告诉我们图像数据是否被取回？ – Pointy 2010-07-29 18:27:59

我会做一个真正简单的测试，以确保我不完全是坚果太... – Pointy 2010-07-29 18:28:16

Javascript：检测图像的加载状态，只有当新图像“加载”时才会换出旧图像？

回答

相关问题