Knockout JS：图像加载
Knockout JS: Image loading
我有部分代码片段如下：
#Foreach row in a dataset...
<!-- ko if: $row.myBoolean -->
<div>
<a href="mylink.html">
<object width="18" data="/assets/img/MyImage.svg" type="image/svg+xml"></object>
</a>
</div>
<!-- /ko -->
它在前端按预期工作，但当我查看网络流量时，我可以看到图像加载正在启动，然后取消：
由于数据集可以有 1000 多行，这对性能有很大影响（myBoolean 几乎总是 returns false）。
我不确定这里发生了什么。我希望浏览器甚至不会尝试为 myBoolean returns false?
的行加载图像
我是不是弄错了什么，或者这就是 Knockout 的工作原理？有更好的方法吗？
你的HTML首先被浏览器解析。浏览器会忽略任何与剔除相关的标记。就它而言，<!-- ko if: ... --> 内容只是评论。
因此，在 您 ko.applyBindings 之前 的那一刻，浏览器将尝试渲染图像并开始加载它。
只有这样，一旦你调用applyBindings并且myBoolean是false，knockout将删除if绑定之间的部分。
浏览器随后可能会注意到不再需要该图像并取消其下载。
为了确保仅当视图模型想要呈现图像时才需要图像，我建议通过挖空注入 data 属性：
data-bind="attr: { data: '/assets/img/MyImage.svg' }"
请注意，加载图像可能需要更长的时间，因为您只会在视图中实际需要它们时才请求它们。
我有部分代码片段如下：
#Foreach row in a dataset...
<!-- ko if: $row.myBoolean -->
<div>
<a href="mylink.html">
<object width="18" data="/assets/img/MyImage.svg" type="image/svg+xml"></object>
</a>
</div>
<!-- /ko -->
它在前端按预期工作，但当我查看网络流量时，我可以看到图像加载正在启动，然后取消：
由于数据集可以有 1000 多行，这对性能有很大影响（myBoolean 几乎总是 returns false）。
我不确定这里发生了什么。我希望浏览器甚至不会尝试为 myBoolean returns false?
的行加载图像我是不是弄错了什么，或者这就是 Knockout 的工作原理？有更好的方法吗？
你的HTML首先被浏览器解析。浏览器会忽略任何与剔除相关的标记。就它而言，<!-- ko if: ... --> 内容只是评论。
因此，在 您 ko.applyBindings 之前 的那一刻，浏览器将尝试渲染图像并开始加载它。
只有这样，一旦你调用applyBindings并且myBoolean是false，knockout将删除if绑定之间的部分。
浏览器随后可能会注意到不再需要该图像并取消其下载。
为了确保仅当视图模型想要呈现图像时才需要图像，我建议通过挖空注入 data 属性：
data-bind="attr: { data: '/assets/img/MyImage.svg' }"
请注意，加载图像可能需要更长的时间，因为您只会在视图中实际需要它们时才请求它们。