Knockout.js 如何在页面中使用带加载微调器的敲除绑定图像列表

我一直在搜索谷歌以获得一些想法，我发现了一些代码，但它不完整，很难理解。 我想使用knockout绑定一个图像列表

加载图像时设置微调器背景的最佳方法是什么。我有一个微调器类，我可以设置和取消设置为背景图像

这是代码，但不清楚

---

如果可能，请解释。

我也有类似的问题。在我的例子中，如果无法加载块中的图像，我需要隐藏整个HTML块。最后，我使用了imagesLoaded库（），并将其包装在一个敲除自定义绑定中：

function tryRegisterEvent(imgLoad, event, handler) {
    if (handler === undefined) return;

    imgLoad.on(event, handler);
}

function tryRegisterEvents(imgLoad, events, bindings) {
    for (var i = 0; i < events.length; ++i) {
        var event = events[i];
        tryRegisterEvent(imgLoad, event, bindings[event]);
    }
}

ko.bindingHandlers['imagesLoaded'] = {
    'init': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        if (imagesLoaded === undefined) {
            throw new Error('imagesLoaded is not defined');
        }

        var bindings = ko.utils.unwrapObservable(valueAccessor());

        var imgLoad = imagesLoaded(element);

        tryRegisterEvents(imgLoad, ['always', 'done', 'fail', 'progress'], bindings);
    },
    'update': function () {}
};

函数tryRegisterEvent（imgLoad、事件、处理程序）{
if（handler==未定义）返回；
imgLoad.on（事件，处理程序）；
}
函数tryRegisterEvents（imgLoad、事件、绑定）{
对于（变量i=0；i

然后我可以在HTML中使用此绑定，如下所示：

<div data-bind="visible: isLoading() || isLoaded()">
    Some more HTML and text...
    <img src="..." data-bind="imagesLoaded: { done: function () { isLoaded(true); }, always: function () { isLoading(false); } }" />
</div>

更多的HTML和文本。。。

我最初将

isLoading

设置为

true

，将

isLoaded

设置为

false

，然后事件处理程序将根据图像加载状态相应地更改视图模型的状态

---

请注意，由于imagesLoaded库可以使用容器而不是单个图像（并监视容器中的所有图像），因此可以在包含所有图像库的父元素上使用此自定义绑定，然后显示微调器，并在触发

始终
事件时将其隐藏。
malsup.com/jquery/block/#demos为什么您的模型中没有一个“加载”布尔值，而html中有一个带有
的图像？您能给我一个示例代码吗？我无法想象如何做到这一点。谢谢这样的方式：我更新了我的问题……请看一看。谢谢
var model = function() {
        //var self = this;
        this.loading =  ko.observable(true);
        setTimeout(function() {
            this.loading(false);
        }, 4000);
    }
    ko.applyBindings(new model());

function tryRegisterEvent(imgLoad, event, handler) {
    if (handler === undefined) return;

    imgLoad.on(event, handler);
}

function tryRegisterEvents(imgLoad, events, bindings) {
    for (var i = 0; i < events.length; ++i) {
        var event = events[i];
        tryRegisterEvent(imgLoad, event, bindings[event]);
    }
}

ko.bindingHandlers['imagesLoaded'] = {
    'init': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        if (imagesLoaded === undefined) {
            throw new Error('imagesLoaded is not defined');
        }

        var bindings = ko.utils.unwrapObservable(valueAccessor());

        var imgLoad = imagesLoaded(element);

        tryRegisterEvents(imgLoad, ['always', 'done', 'fail', 'progress'], bindings);
    },
    'update': function () {}
};

<div data-bind="visible: isLoading() || isLoaded()">
    Some more HTML and text...
    <img src="..." data-bind="imagesLoaded: { done: function () { isLoaded(true); }, always: function () { isLoading(false); } }" />
</div>