关于display:none;的图片加载

1、如果元素有{display: none;}的样式的话,标签上的图片会被请求加载,但是不会被渲染


例子:







其中icon1.png和icon2.png会请求后端进行加载,但是因为样式属性不会计算该元素的布局


2、如果父元素有{display: none;}的样式的话,子元素在样式表中的背景图片既不会渲染也不会加载,但是标签上的图片会被加载不会被渲染


例子:





3、伪类背景图片只在触发伪类时候才会请求加载(因此建议请求雪碧图---即一堆小图汇总到一张大图上,这样不会有UI跳跃感)


4、已经请求过的相同图片不会重复请求


5、不存在的元素,即时样式表里有写,也不会请求加载

你可能感兴趣的:(前端干货)