Question

我正在加载远程文件作为背景图片，最多可能需要2秒钟，具体取决于互联网连接。

我想在背景图片完成加载时触发一个函数。

它会像这样工作（虽然这显然不会）

$("body").css("background image","url('very_big_remote_image')",
         function(data){alert("done")}
         );

Answer 1

试试这个，基本上我加载一个图像对象并将其源设置为背景。一旦加载我改变背景并触发回调：

var img = new Image();
img.onload = function() {
    $("body").addClass("bg");
    //the callback function call here
};
img.src = 'very_big_remote_image';

此图片从不显示，只是强制浏览器加载它然后缓存。

然后在你的css中有这个：

body.bg {
    /* change the position or repeat or whatever else you need in this line */
    background: url('/path/to/the/image/above.jpg') no-repeat 0 0 transparent;
}

Answer 2

jQuery有一个带有回调机制的加载事件函数：

$("<img />").attr('src', 'img/pic.png').load(function() { /* Do stuff */ });

有许多变化。

http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html

http://api.jquery.com/load-event/

在背景图像完成加载时调用函数

2 个答案: