如何實現SVG圖像元素的延遲加載？

Question

在svg標記內，有多個圖像元素，顯示縮略圖圖像。 由於圖像數量很多，頁面加載需要很長時間。 所以我想實現像David Walsh的Simple Image Lazy Load和Fade這樣簡單的延遲加載 。 對於img元素，它工作正常。 但是對於SVG區域的圖像元素，將不會進行加載。 例：

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

和JS編碼：

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

腳本將以這種方式離開頁面：

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

為什么onload不能用於此SVG圖像元素？

Answer 1

你有幾個小錯誤：
<image/>是一個自動關閉的標簽，
xlink:href應該在沒有xlink:前綴的情況下使用，
最好在更改屬性之前設置eventListener。

請參閱代碼段：

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

Answer 2

這是我對同一問題的解決方案，我繼續使用xlink：href屬性讓柵格圖像顯示在SVG內部，但仍然在點擊時延遲加載。 我正在使用不同的lazy-load插件（jquery.lazy.js），但它非常相似：

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

我們的想法是，初始HTML標記用於延遲加載圖像，在點擊事件上，我們將圖像交換為與SVG一起使用，之后圖像是延遲加載的。