knockout.js中的图像数据

使用knockout.js我试图实现本质上是图像预加载器和cacher。练习的要点是，我要加载的图像需要一段时间才能下载，除了在服务器上首先进行处理之外。因此，我的用户界面（可以在多组图像之间浏览）旨在仅在必要时下载这些组以降低负载。另外，我不想在漫长的等待期间向用户提供一个指示器，指出事情正在发生。knockout.js中的图像数据

这就是为什么，继承人的描述我现在的“怎样”：

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>

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

因此最后，蒸馏的问题是：我可以使用DOM图像元素填充一个observableArray，就像在我的例子中，并用knockout.js迭代它们？如果这不可行或不切实际，是否还有其他缓存和迭代图像的解决方案，最好是敲除？

在此先感谢，答案将给予奖励

UPDATE

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

来源

2013-03-01 Martin Sommervold

我不知道这个概念的工作，但你可以给与HTML结合一试： ''

编辑：这是对HTML绑定的细节：[链接]（HTTP：/ /knockoutjs.com/documentation/html-binding.html） – 2013-03-01 10:08:45

你可以在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 
    } 
};

来源

2013-03-01 10:17:39

这是一个很好的建议，今天晚些时候我会对它有所了解。谢谢保罗！ – 2013-03-01 10:42:10

knockout.js中的图像数据

回答

相关问题