Hey, I've run into a bit of a dilemma. My server has a Webinterface that constantly displays an image, but when I access it from another PC, the image starts flickering.
I attempted to solve this issue using this solution, however, it only seems to work when I'm connected locally (like logging in from the same host PC).
The image loading process looks like this:
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;
Using requestAnimationFrame()
to load the image just exacerbates the problem and causes serious lag on the page.
Here's a basic working example, although the image doesn't seem to flicker there.
Has anyone else come across this issue or found a solution? Thanks for any help in advance.
Edit: It appears that the flickering only happens in Firefox and Microsoft Edge. Chrome, Internet Explorer, and Opera don't seem to have this problem.