如何为 SVG 图像元素实现延迟加载？答案

【问题标题】：How to implement lazy load for an SVG image element?如何为 SVG 图像元素实现延迟加载？
【发布时间】：2018-08-08 23:52:20
【问题描述】：

在一个 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 图像元素？

【问题讨论】：

是什么让您认为<svg> 元素中的<image> 元素具有onload 事件？
我发现 onload 是图像元素的图形事件属性之一，在 SVG 文档结构规范 1.1 中定义

标签： javascript image svg onload

【解决方案1】：

你有几个小错误：
<image/>是自闭标签，
xlink:href应该不用xlink:前缀，
最好在更改属性之前设置 eventListener 。

查看sn-p：

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>

【讨论】：

我在 FF 58.0.2 中做到了。你的FF版本是多少？
相同。唔。它在打开单独的文件时有效，但从 iframe 中，没有请求发出。你能从这个codepen看到吗？
codepen 运行良好。可能你打开了广告拦截器？
已检查。诚然，这最初是问题所在，但现在已删除该规则。我已将 sn-p 打包在一个单独的文件中，它适用于 file:// 协议，但不适用于本地服务器。不管是什么，它似乎是一个本地浏览器配置问题，所以与这个问题无关，
在 Chromium 64.0 和 FF 58.0.2 中工作。但是为什么我必须使用 href 而不是 xlink:href？

【解决方案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。

【讨论】：