Gibt es eine Möglichkeit, mit jQuery ein Ereignis beim Laden eines CSS-Hintergrundbilds auszulösen?Triggerereignis auf Hintergrundbild laden
Antwort
Sie es so tun könnten,
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();
});
Würde dies warten, bis das Bild geladen ist oder bis es gibt eine Rendite auf den Wert der 'Hintergrundbild' Eigenschaft? – Squirkle
eigentlich was passiert ist es wird warten, bis das Bild geladen wird ... in diesem Fall das Hintergrundbild des Body-Tags ... – Reigel
Das ist ein ziemlich netter Trick. Wie funktioniert es? Ich kann nicht herausfinden, was $ ('') zielt auf ... – Squirkle
$('<img>').attr('src',function(){
var imgUrl = $('#body').css('background-image');
imgUrl = imgUrl .substring(5, imgUrl .length-2);
return imgUrl;
}).load(function(){
//Do Something
});
kann nicht umhin zu bemerken, dass der obige Code nicht in Geige funktioniert. Sieht so aus, weil es "url ('/ img-path.jpg')" anstatt nur "/img-path.jpg" zurückgibt.
Allerdings schlägt diese Methode immer noch in IE. Jeder hat einen ie Fix?
Ich habe behoben akzeptierte Antwort basierend auf Ihrem Code und Kommentare –
fand ich, dass das Problem mit dem IE-Cache ist: http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/
so können Sie dies versuchen:
$(”).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})
})
})
Meine Absicht war, BilderSmoothLoad – domSurgeon
- 1. jQuery-Triggerereignis an bestimmten Mauskoordinaten
- 2. Triggerereignis für verschachtelten Updatepanel funktioniert nicht
- 3. neues Hintergrundbild auf jeder Seite neu zu laden
- 4. OutOfMemory beim Laden von großen Hintergrundbild
- 5. ReactJS App kann kein Hintergrundbild laden
- 6. verzögert das Laden einer bestimmten CSS-Hintergrundbild
- 7. Ionic2, LocalNotification Plugin, Triggerereignis funktioniert nicht
- 8. jQuery Triggerereignis bei Klick außerhalb des Elements
- 9. JQuery - Hintergrundbild auf Bildobjekt setzen
- 10. Zoom Hintergrundbild auf schweben
- 11. Randradius auf Hintergrundbild
- 12. Bild flackern auf Hintergrundbild
- 13. IE10 Hintergrundbild Artefakte auf Resize
- 14. Twitter Bootstrap Hintergrundbild nicht auf localhost
- 15. css Übergang auf Hintergrundbild Farbverlauf
- 16. Schalter Hintergrundbild auf Erfolg() jQuery
- 17. Textfarbe basiert auf dem Hintergrundbild
- 18. Hintergrundbild auf HTML und Javascript
- 19. Platzieren von Links auf Hintergrundbild
- 20. Phaser: Hintergrundbild auf 100% strecken?
- 21. Hintergrundbild auf Handys Aussehen geschrumpfte
- 22. Hintergrundbild auf td-Tag anzeigen
- 23. Hintergrundbild verschwommen auf Handy iOS
- 24. Wie kann ich ein Hintergrundbild dynamisch in JPanel laden?
- 25. React & Webpack: Laden und Anzeigen von Bildern als Hintergrundbild
- 26. CSS-Hintergrundbild Ladeverhalten
- 27. wpf leinwand hintergrundbild dynamisch
- 28. Wie können wir Lazy laden auf relativer Layout Hintergrundbild in Android
- 29. Fading in einem Hintergrundbild
- 30. Edittext Hintergrundbild
Mögliche Duplikat [Wie kann ich, wenn ein Scheck Hintergrundbild geladen?] (http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded) – azerafati