1

使用 knockout.js，我试图实现本质上是图像预加载器和缓存器。练习的重点是，除了首先在服务器上处理之外，我正在加载的图像需要相当长的时间来下载。因此，我的 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]);
        } 
    }
}

这里发生的是 images 数组包含实际准备就绪的 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]。

4

1 回答 1

2

您可以在 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
    }
};
于 2013-03-01T10:17:39.427 回答