Ist es möglich zu hören, image-load-Ereignisses im SVG?

Ist es möglich zu hören, für eine <image> load-Ereignisses im SVG? Wenn ja, wie mache ich das?

  • Hat "real" bedeutet das gleiche wie "möglich"?
  • Ja, real == möglich
  • Und durch <Bild> du meinst <img>?
  • SVG <Bild> - tag, NICHT alle html-tags
InformationsquelleAutor Rustam | 2012-07-09
  1. 14

    Ja, es ist möglich.

    In markup:

    <image xlink:href="example.png" width="10" height="10" 
       onload="alert('loaded')"/>

    Sehen jsfiddle.

    Im Skript:

    <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>

    Sehen jsfiddle.

    • Ich bin nicht in der Lage zu bekommen dies funktioniert, weder mit markup-noch-Skript; Sie sind in der Lage, ein Beispiel geben?
    • w3.org/TR/SVG/interact.html#SVGEvents, haben Sie versucht, auf die verwiesen wird externalResourcesRequired Attribut, wie bereits erwähnt, der link?
    • die externalResourcesRequired Attribut ist hier nicht notwendig.
    • Es scheint, dass firefox nicht Brandlast Veranstaltungen für <Bild> - Elemente überhaupt. Alle anderen Browser tun, jedoch finden Sie in diesem testcase xn--dahlstrm-t4a.net/svg/events/load-events/image-root.svg.
    • Richtig, es gibt eine öffnen Sie Firefox-bug für das fehlen der load Veranstaltung auf <image>. Ich würde vorschlagen, laden Sie das Bild wie img = new Image(); img.onload = …; img.src = 'example.png' statt mit einer svg - image tag wie in Erik ' s-Beispiel.
    • das onload-Ereignis nicht ausgelöst wird, in chrome hier
    • Ich habe das erste Beispiel in Chrome Canary gerade jetzt, und es scheint Feuer das load-Ereignis - siehe jsfiddle.net/749WG/49. Wenn die Bild-url funktioniert nicht (server offline oder ähnlich) dann keine Last wird gefeuert werden, aber Sie können auch hören, die für das error-Ereignis.
    • ja, die inline in html ist es brennen, aber nicht, wenn in der Anlage über js. Soweit ich weiß, weiß iot ist durch design sicne Chome strenge. Ich habe nicht geschafft tho, um den Inhalt einer svg geladen wird, ist in einem image-tag noch.
    • Ich habe gerade aktualisiert die js-fiddle Beispiel, jsfiddle.net/ZXdxc/81, und von dem, was ich sagen kann Chrome fire load-Ereignissen. Vielleicht post eine neue Frage mit deinem nicht funktionierenden Beispiel?
    • ja, das funktioniert in chome aber nicht safari 🙂

    InformationsquelleAutor Erik Dahlström
  2. 7

    Fand ich, dass dies nicht funktionieren würde, für SVG-Objekt erstellt mit D3, aber die Antwort hat Super funktioniert:

    Wie kann ich die Anzeige eines Platzhalter-Bild in meinem SVG -, bis das eigentliche Bild geladen ist?

    Beispielsweise das funktionierte:

    var img = innerG.append("image")
    .attr('onload', function() {
        console.log('loaded');
    })
    .attr("xlink:href", src)
    .attr("width", size)
    .attr("height", size);

    Aber das hat nicht funktioniert:

    var img = innerG.append("image")
    .attr("xlink:href", src)
    .attr("width", size)
    .attr("height", size);

img.addEventListener('load', function() { console.log('loaded'); });
    • Aber das Attribut name ist als HTML: onload. Aber der event-name ist anders: SVGLoad nicht load. Siehe w3.org/TR/SVG/interact.html#LoadEvent
    • Aber im zweiten Beispiel, das load-Ereignis wird nach der xlink:href-Attribut gesetzt ist, also wenn das Bild geladen ist schnell genug, das Ereignis kann nicht ausgelöst werden
    • Sie müssen in der Regel legen Sie einen Ereignis-listener ersten, bevor Sie Daten, die Trigger Ereignis-listener, um Wettlaufsituationen zu vermeiden, wo die Daten getan, bevor die Ereignis-listener können auch eingestellt werden. Im 2. Beispiel, es wird nicht funktionieren, es sei denn, Sie setzen die .attr("xlink:href", src) zweite, nach dem img.addEventListener('load', function() { console.log('loaded'); }); - beachten Sie, wie in dem Beispiel, dass für Sie gearbeitet, wird der onload-attr zuerst gesetzt wird, bevor Sie src.
    InformationsquelleAutor zayquan
Schreibe einen Kommentar