在 JQuery 中加载时图像闪烁

Question

好的，所以我有以下情况：我有一个提供Web界面的服务器。其中，有一个图像，不断变化。但是，当我从另一台PC连接时，图像闪烁。

我尝试使用此解决方案解决此问题，但它仅在本地工作(例如，当我从主机PC连接到Web界面时(。

图像按以下方式加载：

var img = new Image();
$(img).bind('load', function(event) {
// Change background image
element.css('background-image', url_full);
});
// Set URL of new image -> image is loaded
img.src = url;

用requestAnimationFrame()加载图像只会使情况变得更糟，并且页面会滞后很多。

这是一个最小的工作示例，但是，图像似乎不会在那里闪烁。

有没有人也经历过这种情况/对此有解决方法？提前谢谢。

---

编辑：闪烁只发生在Firefox和Microsoft Edge中，看起来。Chrome，Internet Explorer和Opera似乎没有这个问题。

Answer 1

我修复了这个问题：在旧的JS中，background-image用于更改图像。尽管不是一个很好的解决方案，但它导致了图像的闪烁。

为了修复它，我用一个<img>-object替换了原始的<div>-元素(属性background-image作为图像(。我的 JS 现在更改了此元素的src-属性，从而修复了闪烁。

Answer 2

请分享完整的代码。到目前为止，我可以建议使用：

`var img = new Image();
$(img).bind('load', function(event) {
// Change background image
event.stopPropagation();//to stop bubbling
element.css('background-image', url_full);
});`

如果这也不起作用，请先尝试取消绑定加载事件：

$(img).unbind('load');