Question

在svg标记内，有多个图像元素，显示缩略图图像。由于图像数量很多，页面加载需要很长时间。所以我想实现像David Walsh’s Simple Image Lazy Load and 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:前缀，而不是var image = jQuery("#myimage"); image.on("load", function () { console.log('loaded'); image.removeAttr('data-href'); }); image.attr('href', image.attr('data-href')); 最好在更改属性之前设置eventListener 。

请参阅代码段：

＆＃13;

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

＆＃13;

-----------HEADER-----------
     My Fancy Report
     First Section (Page 1)
-----------------------------
.
. First Section (conitinued)
.
-----------HEADER-----------
     My Fancy Report
     First Section (Page 2)
-----------------------------
.
. First Section (Completed)
.
 -----------HEADER-----------
     My Fancy Report
     Second Section (Page 1)
-----------------------------
.
. Second Section 
.

＆＃13;

Answer 2

这是我对相同问题的解决方案，在该问题中，我继续使用xlink：href属性来使栅格图像显示在SVG内，但单击时仍会延迟加载。我使用的是不同的延迟加载插件（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。

如何实现SVG图像元素的延迟加载？

2 个答案: