[英]How to implement lazy load for an SVG image element?
在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图像元素?
你有几个小错误:
<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>
这是我对同一问题的解决方案,我继续使用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一起使用,之后图像是延迟加载的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.