Почему загрузка svg задерживается только в Google Chrome

У меня есть файл png, svg, который уже скрыт при загрузке. И я пытался управлять этим png и svg с помощью JavaScript, не отображая его. Это работало в Firefox, но не в последней версии Chrome.

Вопрос

Причина в том, что Chrome не читает файл svg, пока не отобразит (display: block) элемент object. Это ошибка в Хроме? Есть ли способ решить эту проблему и добиться того же поведения, что и Firefox?

<img src="http://placehold.jp/150x150.png" style="display: none">

<object data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" type="image/svg+xml" style="display:none;"></object>


javascript svg google-chrome html firefox
person Community    schedule 23.11.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Существуют и другие способы скрыть элементы, вы можете установить ширину, высоту на 0 и переполнение на скрытый, например, или сделать элемент фиксированным и переместить его выше вершины и т. д.

Пример:

function showLoaded(idx) {
  console.log('loaded ' + idx);
}
<img src="http://placehold.jp/150x150.png" style="display: none">

<object data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" type="image/svg+xml" onload="showLoaded(1)" style="display: none;"></object>

<object data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" type="image/svg+xml" onload="showLoaded(2)" style="position: fixed; top: -10000px;"></object>

person Ori Drori    schedule 23.11.2019
comment
Спасибо, это сработало. Кстати, я не смогу использовать свойство display в Firefox в будущем? Или таким образом свойство display будет доступно в Chrome? - person ; 23.11.2019
comment
Лучше использовать что-то, что будет работать для всех браузеров, а затем попытаться адаптировать для каждого из них. Что касается поддержки Chrome - это похоже на оптимизацию (не загружайте ненужные элементы), поэтому я действительно не знаю, собираются ли они что-то изменить. - person Ori Drori; 23.11.2019