Wie die Umsetzung lazy load für ein SVG image-element?

Innerhalb eines svg-Tags, gibt es mehrere Bild Elemente, zeigt Miniaturansichten von Bildern. Wegen der großen Anzahl der Bilder, die das laden der Seiten dauerte eine lange Zeit. Also ich umsetzen möchten einfach lazy load wie David Walsh ‚ s Simple Image Lazy Load und Fade. Für die img-Elemente, es funktioniert gut. Aber für die Bild-Elemente der SVG-Bereich, die Last wird nicht durchgeführt.
Beispiel:

<div>
    <img id="myimg" height="20" width="20" data-src="img1.jpg"/>
</div>
<div>
    <svg width="10%">
    <image id="myimage" height="20" width="20" xlink:href="img1.jpg"/>
    </svg>
</div>

Und die JS-coding:

//This works fine
var img = jQuery("#myimg");
img.attr('src', img.attr('data-src'));
img.on("load", function () {
    img.removeAttr('data-src');
});

//This doens't work, onload will not be processed, image will not be not shown
var image = jQuery("#myimage");
image.attr('xlink:href', image.attr('data-href'));
image.on("load", function () {
    image.removeAttr('data-href');
});

Skripting wird die Seite verlassen, auf diese Weise:

<div>
    <img id="myimg" height="20" width="20" data-src="img1.jpg"/>
</div>
<br>
<div>
    <svg width="10%">
    <image id="myimage" height="20" width="20" data-href="img1.jpg" xlink:href="img1.jpg"/>
    </svg>
</div>

Warum onload funktioniert nicht für dieses SVG image-element?

  • Was gibt Ihnen die Idee, dass ein <image> – element in einem <svg> element hat eine onload Veranstaltung?
  • Ich fand onload als einer der grafische event-Attribute für das image-element, definiert in der SVG-Dokument-Struktur-Spezifikation 1.1



2 Replies
  1. 2

    Haben Sie mehrere kleine Fehler:

    <image/> ist ein self-closing tag,

    xlink:href sollte verwendet werden, ohne xlink: Präfix

    es ist besser, eventListener vor ändern Sie das Attribut.

    Sehen das snippet:

    JS:

    var image = jQuery("#myimage");
    image.on("load", function () {
        console.log('loaded');
        image.removeAttr('data-href');
    });
    image.attr('href', image.attr('data-href'));

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <svg>
        <image id="myimage" width="150" height="150" data-href="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg"/>
    </svg>

    • Dies funktioniert nur in Chrome, aber nicht im Firefox.
    • Ich habe es in FF 58.0.2. Was ist deine FF-version?
    • Gleiche. Hmm. Es funktioniert beim öffnen einer separaten Datei, sondern aus einem iframe, keine Anfrage geht raus. Kann man es von dieser codepen?
    • Die codepen gut funktioniert. Wahrscheinlich hast du adblocker an?
    • Schon geprüft. Diese zugegebenermaßen war das Problem auf den ersten, aber die Regel ist nun entfernt. Ich habe gepackt, der Ausschnitt in eine separate Datei und es funktioniert mit der Datei:// – Protokoll, aber nicht von einem lokalen server. Was auch immer es ist, scheint es sich um ein lokales browser config-Problem, so dass nicht zu dieser Frage,
    • Arbeitet in Chrom 64.0 ein FF 58.0.2. Aber warum muss ich verwenden href anstelle von xlink:href?
    • xlink innerhalb der Xlink-Namensraum des XML-Dokuments, die nicht gilt in unserem Beispiel. Auch read this

  2. 0

    Hier ist meine Lösung für das gleiche problem, wo ich über das xlink:href-Attribut für die raster-Bild-anzeigen innerhalb des SVG, aber immer noch lazy-load klicken. Ich bin mit verschiedenen lazy-load-plugin (jquery.lazy.js -) aber es ist sehr ähnlich:

    <svg>
        <image id="lazy-img" class="lazy" width="" height="" data-source="myimage.jpg" />
    </svg>
    
    $('.someElement').on('click', function() {
        var image = $('#lazy-img");
        image.attr('xlink:href', 'myimage.jpg');
        image.attr('href', 'myimage.jpg');
     });

    Die Idee ist, dass die anfänglichen HTML-markup ist für die lazy-laden von Bildern und beim klicken “ – Ereignis, das wir tauschen, das markup wieder an die Arbeit mit SVG, nach dem Bild ist faul geladen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.