C'è un modo, utilizzando jQuery, per attivare un evento al caricamento di un'immagine di sfondo CSS?Evento di trigger sul caricamento dell'immagine di sfondo
risposta
si poteva fare in questo modo,
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();
});
Attendere fino a quando l'immagine non viene caricata o fino a quando c'è un ritorno sul valore del proprietà 'background-image'? – Squirkle
in realtà quello che è successo è che aspetterà che l'immagine si carichi ... in questo caso l'immagine di sfondo del tag body ... – Reigel
Questo è un trucco abbastanza carino. Come funziona? Non riesco a capire cosa $ ('') sta prendendo di mira ... – Squirkle
$('<img>').attr('src',function(){
var imgUrl = $('#body').css('background-image');
imgUrl = imgUrl .substring(5, imgUrl .length-2);
return imgUrl;
}).load(function(){
//Do Something
});
non poteva fare a meno di notare che il codice di cui sopra non funziona in violino. Sembra proprio perché restituisce "url ('/ img-path.jpg')" invece di "/img-path.jpg".
Tuttavia questo metodo non riesce ancora in IE. Qualcuno ha una soluzione ie?
Ho risolto risposta accettata in base al codice e ai commenti –
ho scoperto che il problema con IE è di cache: http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/
così si potrebbe provare questo:
$(”).attr({src: src + ‘?random=’ + (new Date()).getTime()}).load(function(){
//custom code here....
});
$(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})
})
})
La mia intenzione era di imagesSmoothLoad – domSurgeon
- 1. evento trigger sul cambio classe
- 2. Evento "onchange" di trigger
- 3. Evento di trigger sul clic genitore ma non sui bambini
- 4. Trigger contro evento JPA
- 5. jquery - evento personalizzato trigger
- 6. Evento trigger Jquery per casella di controllo
- 7. WooCommerce: evento trigger dopo variazione di variazione
- 8. evento Trigger su finestra di dialogo aperta
- 9. Evento di ridimensionamento del trigger su stampa
- 10. Evento di modifica trigger <select> utilizzando jquery
- 11. Chiave trigger JQuery. Evento codice
- 12. Trigger WPF basato sul tipo di oggetto
- 13. Sul trigger di invio modulo non funzionante
- 14. jQuery ready evento non attivato sul caricamento parziale della pagina
- 15. Evento di ridimensionamento della finestra di evento sul tag dell'oggetto
- 16. CSS: immagine di sfondo sul colore di sfondo
- 17. Modifica di ComboBox SelectedIndex senza evento di trigger in C#
- 18. - caricamento delle tessere - evento di errore
- 19. Evento Javascript trigger su Aggiungi a DOM
- 20. File di input trigger evento click in AngularJS
- 21. trigger evento click su un segnaposto di Google Maps KML
- 22. Trigger MS Word macro dopo evento di salvataggio
- 23. Evento di trigger quando AsyncTask è completo utilizzando Listener
- 24. Jquery cambiamento datepicker trigger di evento e l'evento
- 25. angular2 - Evento trigger in direttiva dal componente
- 26. Trigger Promessa quando un evento viene attivato
- 27. Knockout JS: Caricamento file evento
- 28. Evento Magento sul cambio di magazzino?
- 29. evento di tocco sul browser web awesomium
- 30. mostra l'immagine di sfondo sul tag td
Eventuali duplicati di [Come posso controllare se un l'immagine di sfondo è stata caricata?] (http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-backback-image-is-loaded) – azerafati