我的问题是，有没有办法首先让网站显示，然后使用 JavaScript 加载这些繁重的资源，同时保留功能以防 JavaScript 不可用？
我的理由：我正在尝试优化我的 Joomla 模板。可能有一些非常重的资源，例如超大的背景图像。我的测试用例有一张 4000px*3000px 3.01MB .png 图片。虽然 SO 向我展示了这个解决方案，但我无法使用它，因为即使没有 JavaScript，我也打算使用背景图像。另外，我自己会想出那个...
如果有人可以给我可靠的证据证明几乎所有的互联网用户都使用 JavaScript，事情就会变得容易得多……我说的是 99.999%。
无论如何，这会对网站显示之前的总时间产生一些影响。我想在另一个资源上使用这种技术，它是由 Joomla 插件运行的 PHP 脚本，响应时间为 1 秒，也会影响总时间。
最终，我想控制何时加载特定资源。
我自己的尝试：我想过去掉background-image相关元素的样式，但是我的时间线还是没有改变。由于浏览器要做的工作更少，它的渲染速度要快得多，但图片仍在加载中。
我想你应该重新考虑你的案子。为什么您首先要在网站上加载如此沉重的图像？那些拥有昂贵数据计划的移动用户呢？您确定他们愿意为 4k 图像花费 3mb 吗？
也许不吧。
相反，您是否尝试为网络优化您的图像？Photoshop等软件提供了这样的选择。作为响应式设计的一部分的自适应图像呢？（粉碎杂志不久前有一篇很好的文章http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design / )
但是，如果您坚持，有一些 javascript 库可以帮助您。我想到的第一个是回弹（http://srobbin.com/jquery-plugins/backstretch/）。它将在您的背景中显示默认颜色，直到您的图像加载然后交换它们。
如果你像Modernizr<html>那样使用 JS 在标签上添加一个交换类（它交换，那么你可以有选择地为没有启用 JS 的浏览器添加图像。.no-js.js
然后你可以愉快地创建一个新Image对象，加载它并在它准备好时更改元素样式。