背景图片加载触发事件

Question

有没有办法，使用jQuery，在加载CSS背景图片时触发事件？

Answer 1

你可以这样做，

demo

$('<img>').load(function(){
    // make sure to bind the load event BEFORE setting the "src"
    alert('image loaded');
}).attr('src',function(){
    var imgUrl = $('body').css('background-image');
    imgUrl = imgUrl .substring(4, imgUrl .length-1);
    return imgUrl;
}).each(function() {
    // fail-safe for cached images which sometimes don't trigger "load" events
    if(this.complete) $(this).load();
});

Answer 2

$('<img>').attr('src',function(){
    var imgUrl = $('#body').css('background-image');
    imgUrl = imgUrl .substring(5, imgUrl .length-2);
    return imgUrl;
}).load(function(){
    //Do Something
});

我不由得注意到上面的代码不能在小提琴中工作。看起来像它，因为它返回"url('/img-path.jpg')“，而不仅仅是"/img-path.jpg”。

然而，这种方法在IE中仍然失败。有没有人能解决这个问题？

Answer 3

我发现IE的问题在于缓存：http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

所以你可以试试这个：

$(”).attr({src: src + ‘?random=’ + (new Date()).getTime()}).load(function (){
  //custom code here....
});