让我的背景图片加载更快?
我的背景图片似乎是最后加载的。第一次我不介意 但我希望它能够被缓存,因此任何使用相同背景的后续页面都应该立即加载。 然而,只有在绘制整个页面后才会加载背景。
我的 css 位于标题中,大部分 js 文件位于底部。 (我也将来自 cdn 的 jquery 保留在标头中)。
背景图像是 1X960 像素(2 色 gif),尺寸非常小,并且沿 Y 方向重复。
我可以做些什么来使其加载更快吗?
老实说,这在 Chrome 和 Firefox 中很明显。在 IE8 中,背景加载迅速。
My background image seems to be loading last. I don't mind the first time,
but I was expecting it to be cached, so any subsequent pages that use the same background should be loaded instantly.
However the background is only loading once the whole page is drawn.
My css is in the header, most of my js files are at the bottom. (I've kept jquery from cdn in the header too).
The background image, a 1X960 px (2 color gif), is pretty small in size and repeating along Y.
Is there anything I can do to make it load quicker?
To be honest this is noticable in chrome and firefox. In IE8 the backround loads promptly.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
由于您使用的是 VS Dev Server,如果您使用的是 Windows 7(也可能是 Vista),这可能值得一试,因为它与一些需要永远解决的 DNS/IPv6 问题有关,并且正是这个问题让我彻底抓狂。同样的问题直到大约 5 天前。加载 500k 页面需要 8 秒,现在需要 383 毫秒
导航到主机文件 (C:\Windows\System32\drivers\etc) 并检查第二个 localhost 条目是否已使用 # 符号注释掉,如下
所示 :这条线立即解决了问题 - 不太确定到底是什么问题,但我知道这解决了它。
Since you are using VS Dev Server this might be worth a shot if you are using Windows 7 (and maybe Vista) it's to do with some DNS/IPv6 problem taking forever to resolve and was something that was driving me stark raving mad with exactly the same issues until about 5 days ago. It was taking 8 seconds to load a 500k page now it takes 383ms
navigate to your hosts file (C:\Windows\System32\drivers\etc) and check that the second localhost entry is commented out as follows with the # symbol:
Commenting out this line fixed the problem instantly - not really sure exactly what the problem was but I know this fixed it.
放大图像
它只有 1 像素高,某些浏览器很难多次重复图像。尝试将其设置为 50px 高,看看是否可以提高性能。我找不到答案,但有人曾经向我展示过,某些浏览器确实很难处理重复的背景,并且它们会消耗大量的处理能力来重复渲染它们数百次。
不同的域
从无cookie域提供静态数据可以提高图像加载性能。
Make the Image Larger
It's only 1px high, some browsers struggle with repeating an image so many times. Try making it 50px high and see if it improves performance. I can't find the answer, but someone showed me once that some browsers really struggle with repeating backgrounds and they use up a huge amount of processing power to render them hundreds of times in repeat.
Different domain
Serving static data from a cookieless domain can improve image loading performance.
检查您的缓存元标记,如果它存在并设置为“无缓存”,它可能不会缓存您的图像。
另外,如果您的 CSS 文件很大,则会影响 CSS 中引用的图像的下载。
Check your cache meta tag, if it's present and set to "no-cache" it may not cache your images.
Also, if your CSS file is very big it will affect the download of your images referenced in the CSS.
所有这些答案的结合都有帮助。我已经把他们全部投了赞成票。
A combination of all these answers helped. I have voted them all up.