Question

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

我尝试使用this解决方案解决此问题，但它仅在本地运行（例如，当我从主机PC连接到网络界面时）。

以这种方式加载图像：

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()加载图像只会使情况变得更糟，并且页面会落后很多。

This是一个最小的工作示例，但是，该图像似乎没有在那里闪烁。

有人也经历过这个/是否有解决办法？预先感谢。

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

Answer 1

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

`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');

Answer 2

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

要修复此问题，我用一个<div>对象替换了原来的background-image元素（以属性<img>作为图像）。现在，我的JS更改了此元素的src属性，从而解决了闪烁问题。

在JQuery中加载时图像闪烁

2 个答案: