我想在我的网站上有巨大的背景图片,但不让用户很难下载他们和网站看起来丑陋的背景负载。
它们的大小不会超过1920年的X 1080,但很难说是千字节/兆字节。
我在这里的选择是什么,哪些是最有效的?
我不太在意带宽,只是想让用户觉得一切看起来都很好;)
发布于 2010-01-15 12:26:38
一种选择是使用多个背景。以小背景作为底层,用较大的背景覆盖它。
这可能是棘手的有两个背景,如果你想在身体上,并希望支持IE。解决方案可能是启动较小的车身背景,使用JS在加载后将低分辨率背景更改为高分辨率背景:
var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';
请记住,这样大的背景比一些移动浏览器需要更多的内存(iPhones前3GS将拒绝解码这样的图像,或将开始清除缓存/标签内容的恐慌)。
后一个问题可以通过CSS Media查询来解决:
http://lofotenmoose.info/css/destroy/media-queries-background-stretch/
除了查询max-device-width
,而不是(虚拟/缩放) max-width
。
https://stackoverflow.com/questions/2071231
复制相似问题