javascript - How to implement lazy load for an SVG image element? - Stack Overflow

admin管理员组

文章数量:1312979

Within an svg tag, there multiple image elements, showing thumbnail images. Because of the large number of images, the page loading tooks a long time. So I want to implement an easy lazy load like David Walsh’s Simple Image Lazy Load and Fade. For img elements it works fine. But for image elements of an SVG area, the load will not be done. Example:

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

And the 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');
});

The scripting will leave the page in this way:

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

Why is onload not working for this SVG image element?

Within an svg tag, there multiple image elements, showing thumbnail images. Because of the large number of images, the page loading tooks a long time. So I want to implement an easy lazy load like David Walsh’s Simple Image Lazy Load and Fade. For img elements it works fine. But for image elements of an SVG area, the load will not be done. Example:

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

And the 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');
});

The scripting will leave the page in this way:

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

Why is onload not working for this SVG image element?

• javascript
• image
• svg
• onload

Share Improve this question Follow edited Mar 1, 2018 at 21:15 Christian Schulzendorff asked Mar 1, 2018 at 0:18 Christian SchulzendorffChristian Schulzendorff 1,47111 gold badge1919 silver badges1616 bronze badges 2

• What gives you the idea that an <image> element inside a <svg> element has an onload event? – enhzflep Commented Mar 1, 2018 at 1:59
• 1 I found onload as one the graphical event attributes for the image element, definded in the SVG Document Structure Specification 1.1 – Christian Schulzendorff Commented Mar 1, 2018 at 20:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You have several small mistakes:
<image/> is a self-closing tag,
xlink:href should be used without xlink: prefix,
it's better to set eventListener before you changing attribute.

See the snippet:

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

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

Here is my solution to the same problem where I keep using the xlink:href attribute for the raster image to show inside the SVG, but still lazy-load on click. I'm using different lazy-load plugin (jquery.lazy.js) but it's very similar:

<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');
 });

The idea is that the initial HTML markup is for the lazy-loading images and on click event we are swapping the markup back to work with SVG, after the image is lazy-loaded.

本文标签： javascriptHow to implement lazy load for an SVG image elementStack Overflow