javascript - KnockoutJS - Base64 动画 gif 重启动画

Question

我有一个 div 元素，它从一个函数中动态获取两个不同的动画 gif。

<div style="width:100px; height:100px" id="img0" data-bind="style : {backgroundImage: img()}"></div>
<button data-bind="click: function(data, event) { changeImg(); }">SWITCH IMG</button>

加载页面时，会显示第一个动画 gif，单击按钮时也会正确显示第二个动画。

self.changeImg = function () {
    self.imgIndex(!self.imgIndex());
};

self.img = function () {

    if(self.imgIndex())
      return "url(GIF1)";
      else
        return "url(GIF2)"
    };

    return self;
}

但是，如果您尝试点击第二次，动画不会显示，您只会看到 gif 的最后一帧。

片段:https://jsfiddle.net/rickhaar/0keu6prx/40/

有没有办法在每次更改图像时重新启动动画同时保持 base64 格式？

Answer 1

这有点像 hack。每当 imgIndex 值发生变化时，将 src 设置为空字符串，然后再将其设置为实际图像。然后动画重新开始**

function vm() {
    var self = this;

    self.img = ko.observable(image1);
    self.imgIndex = ko.observable(true);
    self.changeImg = function() {
        self.imgIndex(!self.imgIndex());
    };

    self.imgIndex.subscribe(() => {
        self.img(''); // or some transparent icon

        if (self.imgIndex()) {
            setTimeout(() => self.img(image1))
        } else {
            setTimeout(() => self.img(image2))
        }
    });

    return self;
}

const image1 = "data:image;base64,R0lGODlhZABkALMPAP8DA3D/cFL/Uq7/ro//jwD/ABf/FzX/Nff/99f/18b/xub/5iX/JQn/Cf84OP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyNDVhZjQwLWY5ZjctN2M0My1iOGYzLWVmN2UwNjA3Y2ExZCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4RDU0NzY1RUVEN0MxMUU4QUUxMzk3RUQzQjQ4Q0RGRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4RDU0NzY1REVEN0MxMUU4QUUxMzk3RUQzQjQ4Q0RGRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTM3YmFmZjMtYTY4NC1jZjRkLWJiMzAtYWFmZGM3NDU0ZGM0IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6MzRkYjg5NDItMjlhMy0xYzQyLWI4ZTktYWNkZjlmNmJiODI4Ii8+IDwvcmRmOkRlc2NyaXB0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",
  image2 = "data:image;base64,R0lGODlhZABkALMPADT/NHD/cFL/Uqv/q47/jgD/APf/9xv/G9b/1sT/xOb/5g7/Dv84OAX/Bf8DA////yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyNDVhZjQwLWY5ZjctN2M0My1iOGYzLWVmN2UwNjA3Y2ExZCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1NjIxMzkyM0VEODkxMUU4ODJBOUE1MjFFRDYxNzM1RCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1NjIxMzkyMkVEODkxMUU4ODJBOUE1MjFFRDYxNzM1RCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YzhlNTMwZWItZDFmZC05ODQ3LTlhOWItYjMzNTk0ODliN2YzIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6MzRkYjg5NDItMjlhMy0xYzQyLWI4ZTktYWNkZjlmNmJiODI4Ii8+IDwvcmRmOkRlc2NyaXB0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";

ko.applyBindings(vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<img style="width:100px; height:100px" id="img0" data-bind="attr : {src: img}" />
<button data-bind="click: function(data, event) { changeImg(); }">SWITCH IMG</button>

** 一些条件:

• 我已将 div 更改为 img，因为前者无法正常工作。我也浏览了其他一些 SO 答案。

• 一瞬间，浏览器的未找到图像 图标出现。你可以通过将 self.img 设置为一个小的透明图标而不是一个空字符串来避免这种情况:

  self.img("/images/small-icon.png")

• 此代码段似乎工作正常。但是在jsfidle中，有时动画没有重启