È possibile ascoltare un evento di caricamento <image>
in SVG? Se sì, come si fa?È possibile ascoltare l'evento di caricamento delle immagini in SVG?
risposta
Sì, è possibile.
In marcatura:
<image xlink:href="example.png" width="10" height="10"
onload="alert('loaded')"/>
Vedi jsfiddle.
In script:
<script>
var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
img.addEventListener('load', function() { alert('loaded'); });
// or alternatively:
// img.onload = function() { alert('loaded'); }
img.width.baseVal.value = 100;
img.height.baseVal.value = 100;
img.href.baseVal = "example.png";
</script>
Vedi jsfiddle.
Non riesco a farlo funzionare, né con markup né script; sei in grado di fornire un esempio? – Richard
http://www.w3.org/TR/SVG/interact.html#SVGEvents, hai provato l'attributo externalResourcesRequired di riferimento, come menzionato nel link? – neo
@neo: l'attributo externalResourcesRequired non è necessario qui. –
ho trovato che questo non avrebbe funzionato per oggetto SVG creati utilizzando D3, ma la risposta qui funzionava benissimo:
How can I display a placeholder image in my SVG until the real image is loaded?
Per esempio, questo ha funzionato:
var img = innerG.append("image")
.attr('onload', function() {
console.log('loaded');
})
.attr("xlink:href", src)
.attr("width", size)
.attr("height", size);
ma questo non ha lavoro:
var img = innerG.append("image")
.attr("xlink:href", src)
.attr("width", size)
.attr("height", size);
img.addEventListener('load', function() { console.log('loaded'); });
Ma il nome dell'attributo è come HTML: 'onload'. Ma il nome dell'evento è diverso: 'SVGLoad' not' load'. Vedi http://www.w3.org/TR/SVG/interact.html#LoadEvent – mems
- 1. Picasso caricamento delle immagini
- 2. È possibile l'elaborazione/analisi delle immagini NodeJS?
- 3. L'anteprima delle immagini del browser incrociato nella sezione di caricamento delle immagini non funziona in ie8
- 4. Come ascoltare un evento di caricamento di un oggetto con un'immagine SVG?
- 5. Caricamento e scaricamento lento delle immagini
- 6. Caricamento dinamico delle immagini R.Drawable using variable
- 7. Immagini SVG in un'applicazione iPhone
- 8. Caricamento immagini in BackgroundWorker
- 9. incorpora immagini SVG collegate
- 10. UIImagepickercontroller: è possibile modificare l'ordinamento delle immagini nel rullino fotografico?
- 11. Caricamento immagini in LaTeX
- 12. Caricamento e visualizzazione svg
- 13. È possibile ascoltare un evento di condivisione post AddThis?
- 14. unione immagini da Raphael svg
- 15. Come garantire il caricamento delle immagini prima di generare PDF?
- 16. Caricamento e memorizzazione di immagini
- 17. WCF RESTful problema di caricamento delle immagini servizio
- 18. È possibile confrontare due immagini in Javascript?
- 19. Immagine SVG con colori CMYK - è possibile?
- 20. In quali circostanze il caricamento delle immagini singolarmente con HTTP/2 è più lento del caricamento di tutte le immagini contemporaneamente con uno sprite a HTTP/1.1?
- 21. Una libreria per convertire svg in immagini?
- 22. Caricamento SVG in SVGWeb dinamicamente con JQuery
- 23. È possibile il caricamento di classi multithreading?
- 24. Le immagini collegate all'interno SVG
- 25. Immagini SVG sfocate in chrome per Android
- 26. Come caricare immagini SVG in Webpack?
- 27. Caricamento lento delle immagini con degradazione elegante (JavaScript)
- 28. Django - caricamento delle immagini statiche come file predefinito ImageField
- 29. Combina caricamento delle immagini ajax con la forma presentare ajax
- 30. Interrompe il caricamento delle immagini con javascript (lazyload)?
Il termine "reale" equivale a "possibile"? – JJJ
Sì, reale == possibile – Rustam
E per intendi ? –
JJJ