Обновить DOM после изменений

Question

У меня небольшая проблема с SVG в теге embed. Я обновляю источник тега embed с SVG-файлом с помощью javascript. Затем я должен обновить атрибут viewbox, чтобы правильно изменить SVG.

Проблема в том, что тег SVG недоступен, поскольку выполнение javascript выполняется слишком быстро.

Пример:

//Creation and insertion by JQuery 
var EmbedTag = $("<embed id='zoomSVG' src=idSVG + ".svg' type='image/svg+xml' width='500px' height='500px' />").appendTo(zoomGalleryHisto); 

//This doesn't work : svgDoc is null 
//SVG document recovery 
var svgDoc = document.getElementById('zoomSVG').getSVGDocument(); 

This work : 
setTimeout(function(){ 
    //SVG document recovery 
    var svgDoc = document.getElementById('zoomSVG').getSVGDocument(); 
},100); 

Я хотел бы не использовать функцию SetTimeout, так как значение тайм-аута зависит от аппаратного обеспечения. Иногда 100 мс работает нормально, но я должен найти универсальное решение.

После установки вставки тегов, могу ли я перезагрузить DOM с помощью javascript? Является ли существующее событие для вставки тега при загрузке встроенного объекта?

Спасибо за вашу помощь

Answer 1

Используйте »OnLoad« событие тега, чтобы задержать вашу функцию до тех пор, пока не будет загружен, чем должны быть доступны.

Answer 2

Вызвать код при загрузке вставки, например.

var EmbedTag = $("<embed id='zoomSVG' onload='init()' src=idSVG + ".svg' type='image/svg+xml' width='500px' height='500px' />").appendTo(zoomGalleryHisto); 

, а затем реализовать свой код в инициализации (или что вы хотите назвать его)

Answer 3

Во-первых, необходимо создать элемент, а затем вы пытаетесь найти его снова в DOM.

Во-вторых, блок javascript не может блокироваться, пока что-то не произойдет, используйте обратные вызовы.

Нечто подобное:

var svgDoc = false; 
// Create an element 
var EmbedTag = $("<embed id='zoomSVG' type='image/svg+xml' width='500px' height='500px' />"); 
// Append it to the dom 
EmbedTag.appendTo(zoomGalleryHisto); 

// Load the svg file 
$.get('file.svg', function() { 
    // And then add it to the created element 
    EmbedTag.attr('src', 'file.svg'); 
    svgDoc = EmbedTag.getSVGDocument(); 
});