Javascript: Detect an image's loading status, and only swap out the old image when the new one is 'loaded'?
<p>i call on a PHP script that generates graph images for me, however, it takes a few seconds. Is there a way to detect when it has finished loading, on the user side, and only swap it with the old image when the php script has finished and the image is ready?</p>

<p>here is the Javascript function i use to call the PHP script:</p>

<p>EDIT (CODE UPDATED)</p>

<pre><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;amp;graph=' + graph +
        (varID != null ? '&amp;amp;varID=' + varID : '') + '&amp;amp;companyID=&lt;?php echo $_SESSION['companyID'] ?&gt;';   
}
</code></pre>

<p>and here is the graph container and the link that uses that function:</p>

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

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

<p>thanks!</p>
