【转载】CSS样式对背景图片加载的影响

图片加载测试

测试浏览器：firefox

1. 只定义，而未使用的CSS样式类，图片不会被加载。×
2. 如果CSS样式类定义了display:none，并且css在引用之前加载，图片不会被加载×
3. 如果先加载了引用css的html元素，然后加载css样式，图片会被加载，尽管定义了display:none;√
4. 如果CSS样式类定义了visibility:hidden;图片会被加载√
5. <img />标签定义了display:none;但引用的图片仍然会被加载√

图片缓存测试

测试浏览器：firefox

1. 图片要被缓存，首先服务器端设置的过期时间不能太短。√
2. 图片被缓存以后，如果刷新页面，仍然会向服务器发起请求，检测服务器是否有改动。√
3. 如果服务器端无改动，则省去图片的下载，直接从缓存读取图片文件。√
4. 图片被缓存以后，如果不刷新页面，再次使用图片的时候，不会向服务器发起新请求，网络断开仍然可以加载已缓存的图片。√

特别提醒

1. 如果服务器禁止了文件缓存，则客户端无法缓存文件，除非使用DataURI代替缓存。
2. 即使文件被缓存了，每次刷新页面仍然会向服务器发起请求，缓存只是省略了文件的下载过程。
3. 图片被缓存了，并不意味着打开页面立即显示，如果网络慢，仍然要等待很久。
4. 如果文件比较小，且网速快，缓存与不缓存感觉上差别不大。如果文件很大，缓存后感觉会很明显。