杂记-201505

发表于   |  

201505杂记

5-13

display:none 和 visibility:hidden 下图片加载问题。

1
// html
<div id="test1">
    <span id="test2"></span>
</div>

//css
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}
或
#test2 {
    background-image: url('mypic.jpg');
    display: none
}

此时 mypic.jpg 会下载

1
// html
<div id="test1">
    <span id="test2"></span>
</div>

//css
#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}

此时 mypic.jpg 不会下载

结论：带有 display:none 和 visibility:hidden 的元素会被加载，display:none的子元素不会被加载。

http://html5doctor.com/block-level-links-in-html-5/