Setting intervals to change background images resulted in a delay

I've been working on creating an animation that switches between 2 images used as the background image of a div. Here's the code snippet I've been using:

var spacecraftInterval = setInterval(function() {
  if (access == true) {
    var imageUrlSpacecraft = "bk-nav-0" + currentArea;
    $("#spacecraft").css(
      "background-image",
      "url(assets/img/" + imageUrlSpacecraft + ".png)"
    );
    access = false;
  } else {
    var imageUrlSpacecraft = "bk-nav-0" + currentArea + "-b";
    $("#spacecraft").css(
      "background-image",
      "url(assets/img/" + imageUrlSpacecraft + ".png)"
    );
    access = true;
  }
}, 500);

The animation works, but I've noticed that there are some moments during the transition where the background image seems to 'lag' or disappear for a few milliseconds. This issue occurs frequently. Do you think this is a browser-related problem, or is it likely an issue with my code?

javascripthtmljquerycssbrowser

Answer №1

How about trying something along these lines?

var spaceshipInterval = setInterval(function(){ 
  $('#spacecraft').toggleClass("spacecraftb")
}, 500);

.spaceship { 
  background-image : url(assets/img/bk-nav-0A.png);
}  

.spaceshipb { 
  background-image : url(assets/img/bk-nav-0B.png);
}  

<div id="spacecraft" class="spaceship"></div>

Answer №2

Possibly the issue stems from the high resolution of the images. One potential solution is to utilize two elements with pre-loaded images and switch between them. Another option is to reduce the image quality to improve loading time.

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

Steps to dynamically populate dropdown menus based on the selected options from other dropdown menus

I am working on a project that involves two dropdown menus. The options for the first dropdown menu are stored in a file called constant.ts. Depending on the selection made in the first dropdown, the options for the second dropdown will change accordingly. ...

javascriptangulartypescriptdropdown

npm: generate new script directive

When I start up my NodeJs (ES6) project, I usually enter the following command in the console: ./node_modules/babel/bin/babel-node.js index.js However, I wanted to streamline this process by adding the command to the scripts section of my package.json fi ...

javascriptnode.jsnpm

Strange circle border appearance in Android / Chrome device

Having an issue with my code on a Samsung Galaxy S5 in Chrome 54.0.2840.85, Android 6.01. You can view the problematic codepen here: http://codepen.io/johnsonjpj/pen/jVpreB The border displays correctly on Firefox and iPhones, but not on my device. Trou ...

androidhtmlcssgoogle-chromesamsung-galaxy

Using callback functions in a JavaScript AJAX request

I am currently working on a function to handle an Ajax request with a callback. The main goal of this code is to send a request and display the response within a div element on my HTML page. However, I have been facing issues with the callback functionalit ...

javascriptjqueryajaxcallback

Access your Vue.js application using Google Sign-In (GIS)

Having trouble with the discontinuation of gapi.oauth2 by Google and finding the new Sign in With Google tools confusing. Project Structure Looking to implement user sign-in with Google on my Vue frontend and authenticate them using OIDC server flow on ...

javascriptvue.jsgoogle-signin

Create a feature in three.js that allows users to click on an object to display information about the

After loading an object using the GLTF loader into my scene, I want to create a point on this object to display popup info. Is there a way to add a point to a specific location on the object? ...

javascriptanimationthree.js3d

Exploring confidential videos through the VIMEO API

I encountered an issue with the Vimeo API, and navigating through their documentation was quite overwhelming. I am trying to send a request to the api in order to fetch information about private videos. I have a code snippet that works for normal videos: ...

jqueryjsonajaxvimeo-api

Is there a way to format Persian words in a Left-to-Right direction?

When attempting to write Persian words in a left-to-right format for math formulas in a textarea using HTML and CSS, I am struggling to make it work with properties like direction:ltr;. I have tried various solutions but none have fixed the issue. I have ...

htmlcsstext-direction

Encountering ENOENT error when accessing view file in NodeJS and Express

I've encountered a strange issue with my nodeJS application after refactoring it. The app launches without any problems, the API responds correctly. However, when I attempt to access "/", I receive the following error: Error: ENOENT, stat '/view ...

javascriptnode.jsexpress

What is the best way to eliminate the margin on the <v-textarea> component in Vuetify?

My textarea seems to have a top margin that I can't get rid of. Here is my code: <v-flex d-flex xs12> <v-textarea v-model="test" outline type="text" color="primary" v-valida ...

cssvue.jsvuetify.jsnuxt.js

After AngularJS has loaded, CSS animations seem to be ineffective

When loading a page, I have created a div that is displayed. Here is the code: <div ng-show="load" class="rb-animate-time rb-animate-hide rb-load"> <div class="text">Hello world</div> </div> <div ng-init="load = false">&l ...

javascriptcssangularjs

The Strapi registration feature in version 4 is giving a "method not allowed 405" error, which

Feeling a bit confused with a Strapi query. I am currently working on v4 and trying to set up a registration feature. The code snippet for invoking the function is provided below. Everything seems fine, such as submitting function variables, etc. However, ...

javascriptnode.jsreactjsstrapi

The formatting of the list is not being correctly displayed in the Ajax Jquery list

Trying to dynamically generate an unordered list from XML onto a jQuery mobile page has been a bit of a challenge for me. While I can display the items on the page, the styling never seems to work properly, only showing up as plain text with blue links. Is ...

jquerycssajax

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

My username-password form is styled and working perfectly, but there's an issue that arises when I log in multiple times. Chrome automatically fills in my email, turning the username textbox yellow. It doesn't seem to happen with Firefox or Safar ...

javascripthtmlcssgoogle-chromecross-browser

Choose the item to automatically reposition itself below once it has been opened

issue : The current behavior is that when the "other" option is selected, the input field appears. However, if I click on the select again, it covers up the input field. desired outcome : Ideally, I want the input field to show up when the "other" option ...

javascriptreactjsantd

Tips on how to eliminate items from a list that do not include a specific character

I need help with a list that has a specific format /listing/vasita-otomobil-volkswagen-boyasiz-2016-passat-variant-1.6-tdi-dsg-higline-sunroof-hayalet-819608311/detail,#,#,,/listing/vasita-otomobil-volkswagen-boyasiz-2016-passat-variant-1.6-tdi-dsg-higline ...

javascriptnode.js

Issue with bottom margin on the last flex item located at the end of the container is not being applied

My button is currently touching the end of the container, but I want to create some space between them. However, adding a margin bottom to the button does not seem to be working as expected. Below is the CSS and HTML code: .events{ height: 100%; d ...

htmlcssflexbox

TypeError: Unable to access the 'items' property of a null value

I am currently working on a program and I am facing an issue where I need to access something from the first component in the second component. Can anyone provide assistance on how to properly construct this? Below is a snippet of my code: ...

javascriptreactjs

Issue with redirect using Node.js promise

I’ve created a settings page where users can add and remove filters. To handle the deletion process, I’ve implemented this jQuery function: $('#delete-filter').click(function (e) { var filtername = $('#filter-list').val(); ...

javascriptnode.jspromise

implementing HtmlSpanner with an appended css stylesheet

Using HtmlSpanner with CSS for TextView I recently discovered a library called HtmlSpanner that claims to assist in adding an HTML string with CSS to a TextView. However, I am struggling to locate any detailed documentation on how to achieve this, except ...

androidcssfromhtml