Javascript-форум - Некорректное отображение ссылок и бэкграундов в пунктах меню

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Некорректное отображение ссылок и бэкграундов в пунктах меню (https://javascript.ru/forum/misc/7636-nekorrektnoe-otobrazhenie-ssylok-i-behkgraundov-v-punktakh-menyu.html)

Некорректное отображение ссылок и бэкграундов в пунктах меню

Написал на js меню как таблицу, подменю - скрытые таблицы (style.display="none"). При нажатии пункта меню, есественно, появляется подменю (style.display="block"), но сначала появляются ссылки (<a>TextMenu</a>), а потом бэки. Как можно сделать, что б они подгружались одноврвеменно или хотя бы, что б сначало подгружались бэки. Не хочеться делать под каждый пункт отдельное изображение :no: Зарнее благодарен :)

а можно как-нибудь увидеть всё это безобразие?

Ну вот пожжалуйста полюбуйтесь )))

ml>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style>

.menu {
background-image:url(images/menu_fon.gif);
background-repeat:no-repeat;
width:155px;
height:30px;
text-align:center;
margin-bottom:5px;
}

.podmenu {

background-image:url(images/menu_fon0.gif);
background-repeat:no-repeat;
width:155px;
height:30px;
text-align:center;
margin:0 5 5 20px;

}

.aMenu {

color:#326315;
font-weight:bold;
text-decoration: none;
margin: 5px;

}

#info {
display: none;
}

</style>
<script>
function visible(x) {
document.getElementById(x).style.display="block";
if (x!='info') {document.getElementById("info").style.display="no ne";}
}
</script>

</head>
<body>
<div>
<div class=menu id=1><a class=aMenu href='' onClick="visible('info'); return false;" onMouseMove="mouseOn(1);" onMouseOut="mouseOut(1);" >Інформація</a></div>

<div id="info">
<div class=podmenu id=11 ><a class=aMenu onMouseMove="mouseOn0(11);" onmouseOut="mouseOut0(11);" href=''>Новини</a></div>
<div class=podmenu id=12 ><a class=aMenu onMouseMove="mouseOn0(12);" onmouseOut="mouseOut0(12);" href=''>Статті</a></div>
<div class=podmenu id=13 ><a class=aMenu onMouseMove="mouseOn0(13);" onmouseOut="mouseOut0(13);" href='' >Документація</a></div>
</div>
</div>
</body>
</html>

Только на локальном тормозов нет - Всё как по маслу. Вот в инете http://polbud2.hmarka.net/ есть(((

http://polbud2.hmarka.net/danni.php

Цитата:

Warning: mysql_connect()

Ошибки MySQL выдают достаточно интересную информацию для хацкеров. Советую душить выводы этих сообщений исользуя символ @.

С картинками проблема в том, что когда свойство display установлено в none контент не загружается. Загрузка начинается только тогда, когда вы ставите его в block, отсюда и задержка. Если картинки будут достаточно тяжёлыми то на локальном сервере вы это тоже сможете почувствовать. Выходом может стать предварительная загрузка изображений:

// Создать объект изображения
var my_image = new Image(ширина, высота);

// Загрузить картинку в память браузера
my_image.src = "images/button.png";


function visible(x)
{
    document.getElementById("некий_элемент").style.backgroundImage = "url('" + my_image.src + "')";

    document.getElementById(x).style.display="block";

    if (x!='info')
    {
        document.getElementById("info").style.display="none";
    }
}

Вот, принцип примерно такой.