如何等待<object>內的SVG在JS發生火災之前完成加載？

我在我的HTML得到這個（SVG的是500K左右）：如何等待<object>內的SVG在JS發生火災之前完成加載？

<object type="image/svg+xml" data="/assets/images/test-diagram.svg" width="100%" height="100%" id="arm" class="svg-content"></object>

我使用GitHub上的腳本以創建SVG視口，這樣我可以平移和縮放視口內部，但像GoogleMaps一樣。

https://github.com/ariutta/svg-pan-zoom

所以加載順序必須是：

SVG-泛zoom.js完成
的SVG的所有500K需要完成加載
下面的代碼需要運行：

var panZoomArm = svgPanZoom('#arm');

不幸的是，上面的代碼在SVG未完全加載時運行，從而導致錯誤。

我已經試過，但.load似乎並沒有被設計爲<object> - 事實上debugger從未被觸發

$('#arm').load(function(){ 
    debugger 
    var panZoomArm = svgPanZoom('#arm'); 
});

這些是一些辦法，我告訴代碼只有500K之後運行svg已被完全下載？

讓我可靠地啓動這段代碼的唯一方法就是讓SVG完全內聯......這樣就像數百行代碼無法緩存。

編輯----

好吧，我得到它的工作，但我很困惑。

這不起作用（調試器從不觸發）：

$('#arm').load(function(){ 
    debugger 
    var panZoomArm = svgPanZoom('#arm'); 
});

這工作：

var arm = document.getElementById("arm"); 
arm.addEventListener('load', function(){ 
    debugger 
    var panZoomArm = svgPanZoom('#arm'); 
});

來源

2015-01-02 fuzzybabybunny

我的理解是，'.load（）'函數並不總是火上的負載，特別是當圖像從系統緩存加載。禁用緩存可能會有所幫助。 – rfornal

Here'a一個無緩存腳本我最近工作... http://stackoverflow.com/questions/27732140/no-cache-script-without-using-jquery/27732207#27732207 – rfornal

有趣。好吧，不幸的是，如果可能的話，我仍然喜歡它被緩存。但即使有東西緩存了'var panZoomArm = svgPanZoom（'＃arm'）;'仍然很快就會關閉...... – fuzzybabybunny

這是我如何得到它的工作：

<object type="image/svg+xml" data="/assets/images/test-diagram.svg" width="100%" height="100%" id="arm" class="svg-content"></object> 

var arm = document.getElementById("arm"); 
arm.addEventListener('load', function(){ 
    var panZoomArm = svgPanZoom('#arm'); 
});

來源

2015-01-06 22:06:49 fuzzybabybunny

在這些情況下，您可以設置運行每個定義的秒interval。然後明確它，當調試運行或var panZoomArm使用下面的代碼獲取一個值：

if (typeof panZoomArm !== 'undefined') { 
    // the variable is defined 
    clearInterval(yourInterval); 
}

希望它可以幫助你！

來源

2015-01-03 05:27:14 Sdghasemi

如何等待<object>內的SVG在JS發生火災之前完成加載？

回答

相關問題