Динамическое введение тега <object>вызывает белую вспышку - PullRequest
Новая
       16

Динамическое введение тега <object>вызывает белую вспышку

1 голос
/ 09 января 2012

Я пытаюсь динамически вставить некоторые HTML / JS / CSS по команде.(удерживая этот код для скорости загрузки страницы).Я нашел изящный способ сделать это, вставив тег HTML5, указывающий на html-файл, который, в свою очередь, ссылается на css и js, вот так: 

function toggleObject() { 
var object = document.getElementById('myObject'); 
  if (!object) { 
    var e = document.createElement('object'); 
    e.setAttribute('data', 'testing.html'); 
    e.setAttribute('id', 'myObject'); 
    // inject data into DOM 
    document.getElementsByTagName('body')[0].appendChild(e); 
 } else { 

    document.getElementsByTagName('body')[0].removeChild(object); 
}}

Единственная проблема с этим заключается в том, что при вставкеотметьте объект (высота, ширина и положение, как определено css), мигает белым перед загрузкой, что не очень привлекательно.

Есть ли средство от уродливой белой вспышки?

Примечание!Я экспериментировал с переключением свойства видимости объекта и запуском div загрузчика, но я не могу понять, какое событие сможет вызвать загрузчик и снова включить видимость, когда объект полностью введен в DOM.В итоге я остановился на тайм-аут на 1 секунду, что кажется неоптимальным.

1 Ответ

1 голос
/ 09 января 2012

Попробуйте установить видимость на скрытый при создании OBJECT Element, а затем установить видимый после его добавления к его родитель Node.

...