车身背景需要一段时间才能加载到侧面..我该如何解决？答案

【问题标题】：Body background takes a while to load landing on the side .. how could I fix it?车身背景需要一段时间才能加载到侧面..我该如何解决？
【发布时间】：2013-01-29 19:49:44
【问题描述】：

所以我网站的整个背景已经手动插入到我下面的 CSS 代码中，但有时，有时背景需要几秒钟才能加载，我会首先看到 DEFAULT while background，我认为这看起来不太好完全没有.. 用户需要立即查看整个预期背景.. 我该如何解决这个问题？下面是处理这部分的 CSS 代码。

body
    {
    background-image:url('/images/background.png');
        background-size:100%;
    width:100%;
    height:100%;
    margin:0 auto;
    }

【问题讨论】：

获得更快的服务器？但说真的，你希望你能做什么？您可以压缩图像，但仅此而已。
是的，确保background.png 的大小很小。也许在 50~100kb。不建议使用大于背景的任何内容。
也尽量使用repeat-x 和repeat-y，而不是使用大图像，您可以使用小图像并重复多次：)
如果您想立即看到背景，请使用 2-10kb 的小尺寸图像，这可以通过小图案和重复的图像来实现。在 Photoshop 中优化您的图像。
速度没有“修复”。另一种方法是添加背景颜色。那么至少你在着陆时看不到纯白色背景

标签： html css xhtml

【解决方案1】：

尽管在主页上提供大图像被认为是不好的做法（尤其是考虑到 html5 提供的强大客户端渲染选项，例如 svg/矢量图形渲染（您可以在 adobe 上创建的任何内容） illustrator 可以用微不足道的成本提供服务）和 canvas 以及随附的强大的libraries）有一些选项可以帮助您：

首次使用的用户：使用在边缘位置缓存静态内容的 CDN（内容分发网络）即像亚马逊的 cloud front 这样的托管服务缓存您在世界各地的服务器场中的图像.. 当第一次用户访问您的站点时.. 它会从离他们最近的服务器场向他们发送静态内容以减少延迟。
重复用户：您可以使用HTML 5 caching。尽管默认情况下浏览器应该缓存像您的图像这样的静态内容..它是不可靠且不可预测的。使用 html 5 缓存，在用户访问您的网站后，html5 将缓存该图像，以便他们下次访问时几乎立即提供该图像。

【讨论】：