用 jQuery 预加载背景图像？答案

【问题标题】：Preload background images with jQuery?用 jQuery 预加载背景图像？
【发布时间】：2012-02-21 15:06:28
【问题描述】：

我有一个当前设置为不显示的 div，该 Div 有一个大约 5000 像素宽、2000 像素高的背景图像。

我只在单击按钮时使用 jquery 切换 div 显示属性，图像太大，div 加载，图像在 1/2 秒后加载；有没有一个功能可以让我在图像准备好之前显示预加载器然后显示它？

谢谢

【问题讨论】：

标签： jquery

【解决方案1】：

这个问题是不久前发布的，只是使用 vanilla javascript 回答，但可以很容易地适应您的场景。

Preloading CSS Images

$(document).ready( function() {

    var c = new Image();

    c.onload = function(){
        $("#Your Div ID").css("background-image", "url(Path to Background Image)");  
    }

    c.src = "Path to Background Image";

});

【讨论】：

只是为图像加载时创建一个事件处理程序，它将图像应用到您的 div 作为背景。在您的情况下，您希望将其变成一个函数，首先显示您的预加载器，然后执行上面的代码以在图像可用时显示图像（并隐藏您的预加载器）。有关图像对象的更多详细信息：w3schools.com/jsref/dom_obj_image.asp

【解决方案2】：

尝试使用原生javascript的Image对象来预加载图片。

还可以考虑通过制作图块来避免在网络上使用如此大的图像。

【讨论】：

【解决方案3】：

试试这个：

http://ditio.net/2010/02/14/jquery-preload-images-tutorial-and-example/

【讨论】：