Подтвердить что ты не робот

Событие триггера при загрузке фонового изображения

Есть ли способ, используя jQuery, инициировать событие при загрузке фонового изображения CSS?

4b9b3361

Ответ 1

вы могли бы сделать это так,

демонстрация

$('<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();
});

Ответ 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. У кого-нибудь есть исправление?

Ответ 4

$(document).ready(function(){
$('img, .hasBGI').css('opacity',0)

$('.hasBGI').each(function(){
    var $this = $(this)
        $bgi = $('<img src="'+/*folderFix*/$this.css('backgroundImage')+'">')
        // $bgi.css(/*hiddingStyle*/)
        $('body').append($bgi)
        $bgi.load(function(){
            $(this).remove()
            $this.animate({opacity:1})
        })
})
$('img').load(function(){
    $(this).animate({opacity:1})
})

})