У меня небольшая проблема, я создал систему скрытого div, которая появляется щелчком.
Всего:
Я загружаю более 100 изображений (!).
Даже оптимизированный (80kb на фрейм, 200kb на фотосессию, 60kb изображение для технических рисунков), существует отставание в 4-5 секунд для отображения всех изображений на ADSL-соединении 20 Мб, потому что моя система (отлично работает с IE 6), загрузите все содержимое всего скрытого div... Но он должен загружать только div: block (так что только два div при нажатии на страницу коллекции) и div: hidden загружаются, когда они превращаются в div: block...
Визуально часть происходящего: http://i.stack.imgur.com/XgDs7.png
Здесь небольшая часть HTML:
<div id="passionnee-couleurs">
<a onclick='collectionDiv("passionnee-beige-2");'><img src="../images/collection/ico/couleur-beige-vue.png"></a>
<a onclick='collectionDiv("passionnee-bleue");'><img src="../images/collection/ico/couleur-bleue.png"></a>
<a onclick='collectionDiv("passionnee-ecaille");'><img src="../images/collection/ico/couleur-ecaille.png"></a>
<a onclick='collectionDiv("passionnee-ecaille2");'><img src="../images/collection/ico/couleur-ecaille2.png"></a>
<a onclick='collectionDiv("passionnee-grise");'><img src="../images/collection/ico/couleur-grise.png"></a>
</div>
Со ссылками для отображения divs (всего 6):
<a onclick="collectionDiv('premiere-beige');cotationsDiv('premiere-cotations');">PREMIÈRE</a>
<a onclick="collectionDiv('passionnee-beige');cotationsDiv('passionnee-cotations');">PASSIONNÉE</a>
Часть JS:
function collectionDiv(id)
{
document.getElementById('passionnee-beige').style.display = "none";
document.getElementById('passionnee-beige-2').style.display = "none";
document.getElementById('passionnee-bleue').style.display = "none";
document.getElementById('passionnee-bleue-2').style.display = "none";
document.getElementById('passionnee-ecaille').style.display = "none";
document.getElementById('passionnee-ecaille-2').style.display = "none";
document.getElementById('passionnee-ecaille2').style.display = "none";
document.getElementById('passionnee-ecaille2-2').style.display = "none";
document.getElementById('passionnee-grise').style.display = "none";
document.getElementById(id).style.display = "block";
}
И небольшая часть CSS:
/* PASSIONNEE */
#passionnee-beige {
position:absolute;
width:994px;
height:532px;
margin:auto;
display:block;
background-image:url(../images/collection/montures/passionnee-beige.jpg);
}
#passionnee-beige-2 {
position:absolute;
width:994px;
height:532px;
margin:auto;
display:none;
background-image:url(../images/collection/montures/passionnee-beige-2.jpg);
}
#passionnee-bleue {
position:absolute;
width:994px;
height:532px;
margin:auto;
display:none;
background-image:url(../images/collection/montures/passionnee-bleue.jpg);
}
Не стесняйтесь спрашивать меня, не все ли вы понимаете.
Спасибо за помощь!
Добрый вечер всем!
Конечная цель - одна ссылка (всего 6) для изменения 2 div одновременно (кадр + технический чертеж). И у этих 2 div есть маленькие кнопки для загрузки контента в те же самые div (скрученные?). Вы можете посмотреть на полной странице здесь: http://dktdesign.com/les-ptites-pupilles/site/fr/collection.html