CODEWITHSUNDEEP
javascriptjquerycss
LorenzBung
LorenzBung

Reputation: 412

Flickering images when loading in JQuery

Okay so I have the following situation: I have a server which provides a Webinterface. In it, there is an image, changing constantly. However, the image flickers when I connect from another PC.

I tried fixing this issue using this solution, but it does only work locally (e.g. when I connect to the web interface from the host PC).

The image is loaded this way:

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;

Loading the image with requestAnimationFrame() only makes it worse and the page lags out a lot.

This is a minimal working example, however, the image doesn't appear to flicker there.

Did anybody experience this as well / have a fix for this? Thanks in advance.

Edit: The flickering occurs only in Firefox and Microsoft Edge, as it seems. Chrome, Internet Explorer and Opera do not seem to have the problem.

Upvotes: 1

Views: 679

Answers (2)

LorenzBung
LorenzBung

Reputation: 412

I fixed the issue: In the old JS, background-image was used to change the image. Despite not being a very nice solution, it caused the flickering of the image.

To fix it, I replaced the original <div>-element (with the property background-image as the image) with an <img>-object. My JS now changes the src-property of this element, thus fixing the flickering.

Upvotes: 1

Shashank Malviya
Shashank Malviya

Reputation: 765

please share full code. As of now I can suggest to use :

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

If this also doesn't work please try to unbind your load event first:

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

Upvotes: 0

Related Questions