पृष्ठभूमि छवि लोड पर ट्रिगर घटना

Question

क्या सीएसएस पृष्ठभूमि छवि के लोड पर एक ईवेंट ट्रिगर करने के लिए jQuery का उपयोग करके कोई तरीका है?

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 
}); 

मदद नहीं कर सका लेकिन लगता है कि इसके बाद के संस्करण कोड बेला में काम नहीं करता। ऐसा लगता है क्योंकि यह सिर्फ "/img-path.jpg" के बजाय "url ('/ 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.... 
}); 

Answer 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}) 
}) 

})