在显示预加载器时预加载所有 CSS 图像

【问题标题】：Preload all CSS images while showing a preloader在显示预加载器时预加载所有 CSS 图像
【发布时间】：2014-10-19 01:37:20
【问题描述】：

我有一个载有大量图片的网站。看到图像慢慢出现是很不吸引人的。我见过一些网站展示了一个隐藏丑陋加载阶段的预加载器。这里我不是在谈论 <img /> 标签，而是在谈论 CSS background-images。

我不明白如何使用 JavaScript 和/或 jQuery 来实现此效果。

P.S：如果有可用的插件，我也在寻找插件的链接。

【问题讨论】：

谷歌是你最好的朋友：gist.github.com/darryl-snow/3822494

标签： javascript jquery css image background-image

【解决方案1】：

开始设置css：

#myElement
{
    background-image: url('loading.gif');
}

然后使用下面的javascript函数：

function loadImage()
{
    var img = new Image;
    img.src = "http://path/to/img";
    img.onload = function() 
    {
        var myElement = document.getElementById("myElement");
        myElement.style.backgroundImage = "url('" + this.src + "')";
    }
}

像这样在 body onload 中触发函数：

<body onload="loadImage();">

或将其添加到从此处触发的另一个初始化脚本中。

希望这会让你继续前进！

【讨论】：