как избежать мигания содержимого jquery при загрузке DOM

Question

У меня есть несколько очень простых функций jQuery, запущенных после того, как документ готов.Например:

$('div.std br').remove();

Я использую это, потому что редактор Magento TinyMCE постоянно добавляет раздражающие <br />, если у вас есть какие-либо пробелы.Это прекрасно работает, но, очевидно, во время загрузки страницы я должен смотреть на уродливый контент со всеми <br /> s, затем он мигает и выполняет функцию, которая еще более отвлекает.

Есть лиспособ предотвратить это или я должен скрывать контент, пока он не будет загружен, как предлагают подобные статьи на эту тему?

Answer 1

... я должен скрывать контент, пока он не загружен ...?

Да.Возможно, вы захотите сохранить пространство в макете, чтобы избежать раздражающего «прыжка».

CSS:

div.str {
    visibility: hidden;
}

JS для размещения сразу после div или вправодо закрывающего тега </body> :

<script>
    $("div.str").find("br").remove();
    $("div.str").css("visibility", "visible");
</script>

Answer 2

Вы пытались скрыть или стилизовать <br /> с помощью CSS:

br{ 
  display: none;
}

Поскольку файл CSS, вероятно, загружается до самого содержимого, к моменту его отображения элементы <br /> не будут отображаться с самого начала и, следовательно, не будут мигать.

Answer 3

Лучший способ сделать это - просто установить для дисплея значение no на объекте, чтобы DOM не отображал его при загрузке.

<div id="testdiv" style="display:none">Hello</div>

...
...
...

$(document).ready(function () {
    $('#testdiv').fadeIn(1000);
});

У меня есть много кода в некоторых из моих старых проектов, которые выглядят так, хотя и выполняют то же самое:

<div id="testdiv" style="visibility:hidden">Hello</div>

...
...
...

$(document).ready(function () {
    $('#testdiv').hide().css('visibility', 'visible');
});

Таким образом, изображение скрывается с помощью HTML, затем JQuery скрывает его (поэтому он скрыт двумя способами на этом этапе), затем HTML устанавливается на видимое, поэтому его просто JQuery удерживает невидимым в DOM на этом этапе тогда я использую это как обычно.

Answer 4

Добавить эти правила CSS:

div.std br {
    display: none;
}

Answer 5

Я бы удалил разрывы на стороне сервера до того, как он будет добавлен в базу данных, или до того, как вы вернете его как контент.