Javascript knockout.js中的图像数据

使用knockout.js，我试图实现本质上的图像预加载和缓存。这个练习的重点是，我正在加载的图像除了首先在服务器上进行处理外，下载还需要相当长的时间。因此，我的UI（可以在图像集之间浏览）旨在仅在必要时下载这些图像集，以减少负载。此外，我不想向用户提供一个指示器，表明在漫长的等待过程中发生了什么

这就是为什么，下面是我目前“如何”的描述：

1：我使用jQuery.load以使用实际图像数据填充数组：

    images[doc.pages()[i].pagenumber() - 1] = $("<img />").attr('src', path).load(function() {}

images[doc.pages（）[i].pagenumber（）-1]=$（“
我使用.load，因为它只在每个网络请求完成后更新DOM，允许我为代码块中的每个迭代设置一个计数器，以向用户指示加载正在进行（例如loadCounter++；）

2:在.load回调中，我现在执行以下操作：

if(loadedPages === doc.pages().length){
    if(loadedPages === doc.pages().length){
        for(var x = 0; x < images.length; x++){
            $("#" + doc.idname()).append(images[x]);
        } 
    }
}

if（loadedPages===doc.pages（）.length）{
如果（loadedPages===doc.pages（）.length）{
对于（var x=0；x

这里发生的事情是，images数组包含实际的现成HTML图像DOM元素，一旦所有网络请求完成，这些元素就可以直接注入到结构中

这就是我目前的工作方式，也是我下一步要实现的目标：

与其这样做，我想用相同的图像数据填充一个淘汰ObservalArray，并对其进行foreach绑定，例如：

<div data-bind="foreach:images">
    <img data-bind="what goes here?">
</div> 


。但是，这样做会导致每次dom更新时重新加载图像（在浏览时删除图像数据）

最后，我要提出的问题是：我是否可以像我的示例中那样用DOM图像元素填充ObservalArray，并用knockout.js对其进行迭代？如果这不可行或不切实际，是否还有其他解决方案可以缓存和迭代图像，最好是使用knockout

提前感谢，答案将得到奖励

更新

可以使用
标记吗？例如
。我现在正在玩它，但我只得到[object].
您可以在div上使用一个，并在其中添加img元素吗？我在这里假设您已经下载了它们，并且仍然创建了它们。然后，您的图像可以是您创建的DOM节点的一个可见数组

<div data-bind="imageAttach: images">
</div> 

ko.bindingHandlers.slideVisible = {
    init: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()); // Get the current value of the current property we're bound to
        // Loop over the array sent in, and add them all to the div
    },
    update: function(element, valueAccessor, allBindingsAccessor) {
        // You could delete all the image nodes here and add in the newly created ones
    }
};


ko.bindingHandlers.slidevible={
init：函数（元素、值访问器）{
var value=ko.utils.unwrapObservable（valueAccessor（））；//获取绑定到的当前属性的当前值
//循环发送的数组，并将它们全部添加到div中
},
更新：函数（元素、valueAccessor、allBindingsAccessor）{
//您可以在此处删除所有图像节点并添加新创建的节点
}
};
我不确定这个概念是否可行，但您可以尝试一下HTML绑定：
编辑：以下是HTML绑定的详细信息：这是一个很好的建议，我今天晚些时候会尝试一下。谢谢Paul！