改善网站上的背景图片加载答案

【问题标题】：Improve background image loading on a site改善网站上的背景图片加载
【发布时间】：2017-05-04 13:05:41
【问题描述】：

我的网站有一个背景图片，当我第一次加载它时；我看到按钮等和 图片在大约一两秒后加载，图像原始大小为 1.1 MB，在阅读以下帖子后，我将其减小到 160 KB，但加载图像仍然需要时间……

水晶，G.5 Easy Ways to Help Reduce Your Website’s Page Loading Speed。 中心点。 2015-08-03.

还有其他改进方法吗？

我用的比较少，如下：

.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: white;
    background: url(../img/intro-bg-compr.jpg) no-repeat bottom center scroll;
    /* ... */
}

【问题讨论】：

对于加载图像，您无能为力。不过，您可以添加一个高度，如果感觉像是图像的占位符，并且在加载时它会在您的内容周围随机播放
@Sudheer - 你能举个例子吗？
因为它是背景图像，所以您不需要高度。他的意思是，如果您在图像之后有一块文本，通过分配一个高度，它将为图像留下所需的空间，而不是让文本在加载之前上下反弹。此处不适用。您可以做的一件事是检查缓存。设置它，以便用户第一次只需下载一次图像。
你已经完成了建议的所有 5 件事吗？如果您链接到您的网站，就会更容易发现问题。

标签： javascript css image twitter-bootstrap less

【解决方案1】：

您是否保存了 JPEG 隔行扫描？它可以帮助感知下载时间。

https://en.wikipedia.org/wiki/Interlacing_(bitmaps)

我也通过https://tinypng.com/成功优化了图片

也可以考虑通过创建微调器来向用户提供页面仍在加载的反馈： http://www.ajaxload.info/

【讨论】：

谢谢，但你能举个实际的例子吗？
隔行扫描应该是您首选图像编辑器的 JPEG 导出功能中的一个选项
实用工具：imgonline.com.ua/eng/…

【解决方案2】：

function backGroundDiv() { document.GetElementById('intro').style.background="../img/intro-bg-compr.jpg" no-repeat bottom center scroll;
}

window.onload= backGroundDiv;

如果您在页面头部运行此代码并修复此 css；

.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: white;
}

它有效。我希望它对你有用。

【讨论】：

它除了添加一个 JavaScript 依赖还有什么作用？

【解决方案3】：

关注这个

第 1 步：在 Photoshop 中打开您的图像。 第 2 步：点击另存为。 第 3 步：在另存为后，您将获得一个 JPEG 选项。选择渐进式选项并给出扫描计数，然后单击确定保存

这将缩短您网站的背景图片加载时间。您的背景图片质量将逐个扫描提高。

【讨论】：