стилизация элементов с помощью Javascript без замечаний - PullRequest
Новая
       4

стилизация элементов с помощью Javascript без замечаний

2 голосов
/ 23 августа 2011

У меня есть веб-страница, которая имеет разметку контента, например 1,2,3 в разметке (а также для no-js), в то время как визуально Я хочу, чтобы она была 2,3,1.

Я использую Javascript (jQuery), чтобы поменять их позицию.Но проблема в том, что код Javascript выполняется после загрузки страницы, и поэтому процесс подкачки может быть явно виден.

Единственное (и плохое) решение, которое я могу придумать сейчас, - сначала спрятать все тело.и восстановить тело после завершения обмена. 

$(function() {
    $("#div2, #div3").insertBefore("#div1");
    $("body").css({display: "block"});
});

<body style="display: none;">
...
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
...
<!-- in case JS is disabled, use css to restore -->
<!-- style should not be here, that's why I said it's a bad one. -->
<style type="text/css">
body {display: block !important;}
</style>
</body>

У кого-нибудь есть идеи получше?

1 Ответ

2 голосов
/ 23 августа 2011

Попробуйте выполнить JavaScript сразу после этих трех элементов: 

<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div> 
<script type="text/javascript"> $("#div2, #div3").insertBefore("#div1"); </script>

Конечно, это загрязняет ваш HTML, но в любом случае это лучше, чем скрывать весь элемент bodyбудет мигать в некоторых старых браузерах).

...