Knockout JS：图片加载

Question

我有以下代码片段的部分：

#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 几乎总是返回 false）。

我不确定这里发生了什么。我希望浏览器甚至不会尝试为 myBoolean 返回 false 的行加载图像？

我做错了什么，或者这就是 Knockout 的工作方式？有没有更好的方法来做到这一点？

Answer 1

您的 HTML 首先由浏览器解析。浏览器会忽略任何与淘汰赛相关的标记。就它而言，这些<!-- ko if: ... -->东西只是一个评论。因此，就在您之前的那一刻ko.applyBindings，浏览器将尝试渲染图像并开始加载它。只有这样，一旦你调用applyBindingsand&nbsp;myBooleanis&nbsp;false，knockout 将删除if绑定之间的部分。浏览器可能会注意到不再需要该图像并取消其下载。为了确保只有在视图模型希望它们呈现时才需要图像，我建议data通过敲除注入属性：data-bind="attr:&nbsp;{&nbsp;data:&nbsp;'/assets/img/MyImage.svg'&nbsp;}"请注意，加载图像可能需要更长的时间，因为您只会在视图中实际需要它们时才请求它们。