Question

工作环境：我有一个必须有图像背景的网站（假装它有数学问题，别无选择，只能接受这个）。

有没有办法让我格式化我的html和CSS，以便后台加载更快？

我有一个想法，而不是让“身体”带有图像背景，而是将网站分成行（使用标签），希望浏览器加载div，因此它可以呈现一些可见的在装载一切之前，网站的一部分。

我很确定我的手动div分离方法（并设置每个切片的背景）不是最有效的方法。实施这项技术的最佳方法是什么？

Answer 1

恕我直言最简单的方式来做图像背景的网站是这个图像的延迟加载。就像这里一样

HTML：

<body>
    ...
</body>

和CSS：

.dom-loaded {
    background-image: url('url-to-image');
}

并使用JS进行终结（在完全加载DOM后将dom-loaded添加到body元素：

<script type="text/javascript">
    function lazyLoad() {
        $('body').addClass('dom-loaded');
    }

    if (window.addEventListener)
        window.addEventListener("load", lazyLoad, false);
    else if (window.attachEvent)
        window.attachEvent("onload", lazyLoad);
    else window.onload = lazyLoad;
</script>

这里你有jsFiddle工作（使用setTimeout只显示延迟）：http://jsfiddle.net/37vb4npa/1/

此外，您需要记住图像优化（例如ImageOptim - https://imageoptim.com/pl.html，或者像SmushIt这样的在线内容 - http://www.smushit.com/ysmush.it/）。并记住其他速度优化的东西。

你的想法与Patrick的Hamman＆＃34; Breaking News in 1000ms＆＃34;幻灯片是关于 - https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014 - 你会发现一些不错的＆amp;先进的技术，以加快网站。

此外，您可以使用插件进行延迟加载：http://www.appelsiini.net/projects/lazyload/enabled_background.html

Answer 2

您可以对图像进行许多优化，以便加快加载速度。

如果是png图像，请使用服务http://pngquant.org/来实现有损压缩图像而不会丢失很多图像细节。或使用http://optipng.sourceforge.net/
如果图像主要是几何图形，请考虑使用地图和区域。
使用服务器端gzip压缩。
使用延迟加载技术防止显示加载图像。
使用Google Page Speed进一步优化网站，以便有效利用可用带宽。

Answer 3

1）首先你需要一个透明图像1x1像素只需将此数据uri设置为src默认属性，不要将src属性保持为空，否则调用当前页面url会增加额外的http请求

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

2）然后在onload事件之后在src属性中添加你的图像url。

加快图像背景的页面加载

3 个答案: