Есть ли способ, используя jQuery, инициировать событие при загрузке фонового изображения CSS?
Событие триггера при загрузке фонового изображения
Ответ 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. У кого-нибудь есть исправление?
Ответ 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....
});
Ответ 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})
})
})