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

• 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

2 Answers 2

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.