淘汰赛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' }"

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