在一个 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 图像元素?
最佳答案
你有几个小错误:
<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>
关于javascript - 如何为 SVG 图像元素实现延迟加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49040771/