Flashing visuals during page load using JQuery

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.

Answer №1

The issue has been resolved: The previous JavaScript code utilized background-image to update the image, which led to flickering.

To rectify this, I substituted the original <div> element (which used background-image) with an <img> object. Now, my updated JavaScript modifies the src property of this element, effectively eliminating the flickering problem.

Answer №2

Could you kindly provide the entire code? At this moment, I can only recommend using:

`var image = new Image();
$(image).on('load', function(event) {
    // Replace background image
    event.stopPropagation(); // Prevent bubbling
    element.css('background-image', url_full);
});`

If this approach doesn't yield results, try unbinding the load event first:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

primary and secondary colors within the Material UI design scheme

Is there a way to apply different colors for Cards and Papers in the Material UI Theme that are compatible with both light and dark modes? In my app, I have a list of Cards placed on top of a Paper background. Currently, the default color for both the Pap ...

Having trouble saving user input from a form to a database using axios, mongodb, and vue?

I am a beginner in working with Vue and I'm currently facing an issue while trying to submit user input data to my MongoDB using axios. Although the data from the database is displayed on the page, I can't seem to get the form input data to succe ...

Modifying PDF files using Angular 4

Encountering a CORS problem in node v8.9.4. Error message - Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200& ...

Upon loading the React Login page, the focus immediately shifts to the 'password' field rather than the 'username' field

I am currently in the process of building a login page using React. The code below is from my input.jsx file where I have imported Bootstrap components. import React from "react"; const Input = ({ name, label, value, onChange, error }) => { ...

Converting Laravel variable into an image using JavaScript

I have a base64 string that I'm passing from the controller to the view. After verifying that the base64 string is correct online (by converting it to an image), I am attempting to call it in my JavaScript like so: <script> var crosshairImg ...

Setting up multiple versions of npm application

Can I have multiple versions of npm installed for different projects on Windows 10, or are npm installations always global? I attempted to install different versions using https://github.com/marcelklehr/nodist, but it only affected the node version and no ...

Is the form background color displaying correctly only in Internet Explorer 8?

Typically, I struggle with IE8, but in this situation it's the only browser that displays the form background color correctly. It's interesting how the CSS only works as intended in IE8, while Firefox and Safari don't show any background col ...

I'm looking for a way to add an onclick event to every element created by Vue.js through a "v-for" loop in order to toggle the visibility of its inner content

My Vue data consists of: data: function() { return { results: { "items": [ { "id": "770c257b-7ded-437c-99b5-3b8953b5be3a", "name": "Gsbssbb", "price": 9559, "colour": { ...

Having difficulty with CSS animation and background issues

I can't seem to get my rotating background to work using CSS keyframe animation. I've tried different things but can't figure out what's going wrong. Below is my code: .main-header { width: 100%; Height: 128px; } .main-header, ...

What is the best way to transform a GET request with a query string into a promise?

After successfully making a request with querystring params, I encountered an issue while trying to promisify my request: // Works var Promise = require("bluebird"); var request = Promise.promisifyAll(require("request")); request.get({ url: 'htt ...

Detecting resolutions on an iOS Simulator using PhoneGap

As a newcomer to the world of development, I am diving into the process of creating iOS apps using Phonegap. To accommodate different resolutions, I have developed four separate CSS files. <link rel="stylesheet" media="only screen and (max-device-width ...

Using scripts to populate a Google Sheet with data from Postman

I'm currently working on populating a Google sheet using apps script. The task involves receiving a JSON object from Postman via POST request. The structure of the object is as follows: { "email":"<a href="/cdn-cgi/l/email-prote ...

What is the best way to combine a string with a $scope variable in AngularJS?

Is there a way to add a variable to the $scope model in order to concat it? I'm attempting this code: for(var i=0; i<=response.length-1; i++) { $scope.formData.jobId+i = response[i].jobId; } How can I combine the variable i with $scope.formDat ...

The unexpected actions while altering the direction of iteration in a 2D array and sorting elements

If we consider a 2D array: ┌─────────┬───┬───┬───┐ │ (index) │ 0 │ 1 │ 2 │ ├─────────┼───┼───┼───┤ │ 0 │ 2 │ 3 │ 2 │ │ 1 │ 3 │ ...

Using Jquery in asp.net to dynamically add and delete rows within a table

Having an organized table on the Master Page table border="1" border-style="dashed" width="80%" id="tblAddBirthdays" tr id="tr" td asp:TextBox ID="txFirstName" runat="server" asp:TextBox asp:TextBox I ...

What is the best way to create clickable <tr> elements that function as links rather than cells?

Although it seems simple, I am struggling to achieve this task. I have a list of rows with 6 columns that display data from MySQL. I want to make each row clickable instead of just a cell, which will open a new URL in a new tab. Below is the structure I ...

Receiving a 200 response code, however the controller's store() method is not being accessed

Recently, I made the decision to switch from using a form in a blade file to a Vue-based form that utilizes Axios for posting data. After making these changes, I encountered an issue where I receive a 200 response, but my controller's store() method i ...

Include a Next and Previous button in this series of thumbnail images

Hey there, I need some assistance in getting the "Next" and "Prev" buttons to function correctly alongside the thumbnail images. The thumbnail clicks are working fine, but I want the navigation arrows to work as well. Your help is much appreciated! If you ...

Unable to retrieve dynamic variable values from URL in Node.js using ES6 template strings

Below is the code snippet I am using: let urlString = https://${process.env.API_KEY}:${process.env.API_TOKEN}${process.env.SUBDOMAIN}/v1/Accounts/${process.env.ID}/Calls/connect However, the values of variables API_KEY , API_TOKEN , SUBDOMAIN and ID are ...

Exploring the process of creating a interactive rectangular border on an image with JavaScript

I'm currently working on a project that requires me to draw multiple bounding boxes interactively within an image displayed on a web browser. After drawing the bounding boxes, I will need to extract their coordinates. Are there any suggestions for a J ...