title: How to implement lazy load for an SVG image element?
body: <p>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 <a href="https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/" rel="nofollow noreferrer">David Walsh’s Simple Image Lazy Load and Fade</a>. For img elements it works fine. But for image elements of an SVG area, the load will not be done.
  Example:</p>
  
  <pre><code>&lt;div&gt;
      &lt;img id="myimg" height="20" width="20" data-src="img1.jpg"/&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;svg width="10%"&gt;
      &lt;image id="myimage" height="20" width="20" xlink:href="img1.jpg"/&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the JS coding:</p>
  
  <pre><code>// 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');
  });
  </code></pre>
  
  <p>The scripting will leave the page in this way:</p>
  
  <pre><code>&lt;div&gt;
      &lt;img id="myimg" height="20" width="20" data-src="img1.jpg"/&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div&gt;
      &lt;svg width="10%"&gt;
      &lt;image id="myimage" height="20" width="20" data-href="img1.jpg" xlink:href="img1.jpg"/&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Why is onload not working for this SVG image element?</p>