在jQuery环境下,一般HTML元素的load事件无法监听到背景图像的加载。
当我们需要监听到背景图像的加载时,可以利用浏览器的缓存机制,创建一个空Image对象同时进行加载,此时该Image对象的load事件即为源图像加载完成的事件。于是在jQuery中我们可以利用此函数
function imageListener(url, handler) {
$("<img />").attr("src", url).load(handler);
return url;
}
来监听背景图像的加载,用法如下:
$("body").css("background-image", "url(" + imageListener("background.png", backgroundImageLoadedHandler) + ")");
此时backgroundImageLoadedHandler即为网页背景加载的监听函数。
因为我对jQuery的内部事件机制不太了解,按理说应该是可以将backgroundImageLoaded
事件写成jQuery插件的,留待将来完成吧。