Question

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

这就是为什么，并且继续描述我目前的“如何”：

1：我使用jQuery .load来填充具有实际图像数据的数组：

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

我使用.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]);
        } 
    }
}

这里发生的是图像数组包含实际准备好的HTML图像DOM元素，可以在所有网络请求完成后直接注入到结构中。

这是我目前的方式，这就是我想要实现的目标：

而不是这样做我想用相同的图像数据填充一个淘汰的observableArray，并对它进行foreach绑定，例如：

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

这个例子最终解决了我的问题。敲除中的数据绑定结构通常让你绑定到属性，例如<img data-bind="attr:{src:path}。但是，这样做会导致每次dom更新时都重新加载图像（在浏览时删除图像数据）。

最后，提出的问题是：我可以使用像我的示例中的DOM图像元素填充observableArray并使用knockout.js迭代它们吗？如果这不可行或不切实际，是否有任何其他解决方案用于缓存和迭代图像，最好是淘汰？

提前致谢，答案将得到回报

更新

可以使用<object>标记吗？例如<object data-bind="attr:{data: $data.imageData}"></object>。我现在正在玩它，但我只得到[object Object]。

Answer 1

你可以在div上使用custom binding并在其中添加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
    }
};

knockout.js中的图像数据

1 个答案: