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：檢測圖像的加載狀態，只有當新圖像「加載」時纔會換出舊圖像？

回答

相關問題