Запретить загрузку содержимого скрытого div

0

У меня небольшая проблема, я создал систему скрытого div, которая появляется щелчком.

Всего:

  • 6 кадров: редактируемое текстовое меню внизу справа (коллекция Notre)
  • 7 цветов для каждого: изменяемый через небольшие квадраты цвета в рамке
  • 2 разных угла (когда вы нажимаете на маленький квадрат цвета, который меняет угол обзора)
  • 14 фотографий для технических чертежей (формат нижнего левого квадрата)

Я загружаю более 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);
}

Не стесняйтесь спрашивать меня, не все ли вы понимаете.

Спасибо за помощь!

Добрый вечер всем!

EDIT: http://jsfiddle.net/dktdesign/2B3Rw/12/

  • 0
    Большое спасибо, но я понятия не имею, как я должен это сделать ... innerHTML?
  • 0
    jsfiddle.net/dktdesign/2B3Rw/12
Показать ещё 1 комментарий
Теги:
onclick
hidden
getelementbyid

1 ответ

0

Конечная цель - одна ссылка (всего 6) для изменения 2 div одновременно (кадр + технический чертеж). И у этих 2 div есть маленькие кнопки для загрузки контента в те же самые div (скрученные?). Вы можете посмотреть на полной странице здесь: http://dktdesign.com/les-ptites-pupilles/site/fr/collection.html

  • 0
    это слишком сложно?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню