淘汰赛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的行加载图像？

我有什么问题吗，或者这是淘汰赛的工作方式吗？ 有更好的方法吗？

Answer 1

您的HTML首先由浏览器解析。 浏览器将忽略任何与删除相关的标记。 就其而言， <!-- ko if: ... -->只是注释。

因此， 在您ko.applyBindings 之前的那一刻，浏览器将尝试渲染图像并开始加载它。

只有这样，一旦您调用applyBindings并且myBoolean为false ，敲除将删除if绑定之间的部分。

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

为了确保仅在viewmodel要渲染图像时才需要这些图像，我建议通过剔除注入data属性：

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

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