0

我有一个小问题，我设置了一个隐藏div的系统，出现点击。

总共有：

  • 6 帧：右下角的可编辑文本菜单（Notre Collection）
  • 每种 7 种颜色：可通过框架中的小方块颜色进行修改
  • 2个不同的角度（当你点击一个小方块颜色时，会改变视角）
  • 14张技术图纸图片（左下方形格式）

我有 100 多张图片要加载（！）。

即使经过优化（每帧 80kb，每张照片 200kb，技术图纸 60kb 图像），由于我的系统（与 IE 6 完美配合），在 20mb ADSL 连接上显示所有图像有大约 4-5 秒的延迟，加载所有隐藏的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>

带有显示 div 的链接（总共 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);
}

如果您不了解所有内容，请随时问我。

谢谢您的帮助！

各位晚上好！

编辑：http: //jsfiddle.net/dktdesign/2B3Rw/12/

4

1 回答 1

0

最终目标是一个文本（共 6 个）链接同时更改 2 个 div（框架 + 技术绘图）。这 2 个 div 有小按钮来加载这些相同 div 中的内容（扭曲？）。您可以在此处查看完整页面：http: //dktdesign.com/les-ptites-pupilles/site/fr/collection.html

于 2013-11-15T07:00:22.703 回答