我有一个小问题，我设置了一个隐藏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/