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 myBooleanis false，knockout 将删除if绑定之间的部分。

浏览器可能会注意到不再需要该图像并取消其下载。

为了确保只有在视图模型希望它们呈现时才需要图像，我建议data通过敲除注入属性：

data-bind="attr: { data: '/assets/img/MyImage.svg' }"

请注意，加载图像可能需要更长的时间，因为您只会在视图中实际需要它们时才请求它们。