Slowly rendering spinner in Google Chrome using jQuery

When I click a button, I want to display a spinner to indicate that the browser is processing actions in the background. Interestingly, the spinner appears immediately after clicking the button on Firefox, but there is an 8-second delay before it shows up on Google Chrome. I've inspected the issue using developer tools and noticed that the class attribute is added to the HTML code right upon button click.

Below is my markup:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="loadSpinner" style="display:none;"></div>
    <button type="submit" class="btn spinnerEvent" >On</button>
     
    <script>
        $(document).on("click", "button.spinnerEvent", function(event){
            $('#loadSpinner').addClass('show');  //LOADS THE SPINNER
        });
    </script>

    <style>
        #loadSpinner.show{
            background:#000 url(../images/spinner-small.gif) no-repeat center center;
            background-color: transparent;
            height: 128px;
            width: 128px;
            position: fixed;
            z-index: 1000;
            left: 50%;
            top: 25%;
            margin: -25px 0 0 -25px;
        }
    </style>

Answer №1

I have made some adjustments to your code and created a functional fiddle for you to reference: Check out the updated code here

HTML:

I removed the display:none inline style as it was overriding the CSS styles defined in the style tag.

<div id="loadSpinner"></div>
<button type="submit" class="btn spinnerEvent">On</button>

CSS:

All styles are now set within the style tag.

#loadSpinner {
    display: none;
}

#loadSpinner.show {
    background: #000 url(../images/spinner-small.gif) no-repeat center center;
    background-color: red; /*changed to red for visibility*/
    height: 128px;
    width: 128px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 25%;
    margin: -25px 0 0 -25px;
    display: block;
}

In Google Chrome, the loading div should now appear immediately upon clicking the button.

If issues persist, consider preloading the spinning image on the page as it may be taking time to load, causing a delay in execution.

For tips on how to preload CSS images used as backgrounds after page load, refer to this guide: CSS Image Preloading Tips

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

What is the method for aligning navbar items to the right in Bootstrap 4?

I'm new to Bootstrap and I have a question about aligning navbar items to the right in Bootstrap 4. I've tried the solutions provided in this article Bootstrap 4 - Right Align Navbar Items, but they didn't work for me. I'm trying to un ...

What is the best way to increase the height of an image in a grid container beyond the height of

I am currently designing a grid layout to showcase recent articles. Each article includes an image and a brief description. My goal is to have the image taller than the content text block, while ensuring responsiveness across various screen sizes. Below i ...

Ways to retrieve an object initialized within a function

I'm sorry if my title is a bit confusing. I'm currently working on creating an object that contains key-value pairs of other objects. Below is the code snippet I'm testing in the Chrome console. When I try to create the object using the Cha ...

Show a small section of a webpage within the same webpage in MVC 4

Within my application, I have utilized the div.load() method in jQuery to load a partial view within a common View. I am currently attempting to update the values within the partial view and display it in the same view using jQuery. Are there any other met ...

Using factories in controllers does not function properly in Angular 1.6

My head is spinning with this one. There are 3 files in play: app.js, app.services.provider.js, admin.js In app.js, I set up my module: (function() { angular.module('myApp', ['ngRoute']).config(function ($routeProvider) { ...

Developing a custom function to retrieve an array as a callback

I'm currently diving into the world of Node.js Struggling with implementing my own callback function in a certain method. It may seem like a straightforward task, but I'm finding it quite challenging to grasp. This specific function takes an ad ...

Searching for all potential arrays of length L that total N or fewer can be achieved using an algorithm

In JavaScript, I am looking for a way to discover all potential arrays - consisting of non-negative integers - with a size L that add up to - at most - N: function findArrays(size, maxSum){} For example: findArrays(3, 2) Sample output: [[0,0,0], [0,0,1], ...

Reading JavaScript files using the HTML 5 File Reader

Currently, I am working on a feature that allows users to drag and drop a folder containing JavaScript files into an HTML5 page. Here is the code snippet for my implementation: $scope.files = []; //Establish dropzone var dropbox; dropbox = document.getEle ...

Tips for attaching inline styles to the body element with a vuejs component

I am new to vue.js and have been learning for a couple of days now. There are still some concepts that I am struggling to understand. I am currently working on creating a dropdown menu that appears when the user clicks on three dots. However, I am facing a ...

Looking to insert data into an array using PHP and jQuery?

How can I add the value from an input field into an array in PHP? array( "message"=>$_POST['test'], "others"=>"blah" ) <input type="text" id="putIntoArray" > <a href="#" onclick="jqueryPOST(this.value);">Post</a> functi ...

Conflicting styling issues with hover colors on unordered list items

I am experiencing an issue with conflicting color schemes in a nested ul menu. The main menu items are all white, and the top menu item links turn orange on hover as intended. However, the sub menu items need to have white text on an orange background (whi ...

Tips for integrating a logo into router view animations

How can I incorporate a logo into the white fade-in screen that appears when navigating between subpages using <router-view> within App.vue? Here is a simplified version of my App.vue code: <template> <div id="app"> <div ...

React Table Pagination Bug with Material UI Library

I am currently using Material UI and referencing the table sample provided at https://material-ui.com/demos/tables/. However, when attempting to implement the Custom Table Pagination Action according to the sample, I encountered an error. The error "inher ...

HTML code is shown as plain text instead of being rendered as a webpage

Hey there! I'm embarking on a journey to integrate APIs into my project for creating a Weather reporting system. Check out my .js script below: const express = require("express"); const bodyParser = require("body-parser"); const https = require("https ...

Arranging array elements according to the values in another array

I am working with an array of selections: var selections = ( JSON.stringify($('#approval').select2('data')) ); var selections = JSON.parse("[" + selections + "]"); When I use console.log with selections, the output is: https://i. ...

Incorporating AJAX in jQuery mobile to transmit data to a controller in CodeIgniter

I'm currently facing an issue where despite successfully retrieving the latitude and longitude values from the geolocation feature in Google Chrome, I am unable to pass these values to the index function within the controller named Add. When attemptin ...

Is the scrolling functionality acting strange while using React Three Fiber?

In my React Three Fiber application, I have the following structure: Website Canvas NativeHTMLContent Canvas Website The issue I'm facing is that after scrolling down the entire canvas, the scrollbar resets to the top and starts scrolling from the t ...

Neglecting an error from a completed function in Node JS

I am currently facing a challenge in deleting votes from my Firebase database table. It appears to be an asynchronous request that requires some time to process. However, my function concludes prematurely leading to the following error message - Ignoring ...

Issue with Mat-AutoComplete arising while utilizing a formArray

After adding a form array to account for multiple rows, I had to modify my definition from: shoppingCartList Observable<any[]>; to shoppingCartList: Observable<any[]>[] = [];. However, this change resulted in an error in my filter function whic ...

Adjust the jQuery and PHP script to retrieve both the ID and text content to populate an OPTION element

I have a basic DROPDOWN list: <select class='form-control' id='builders' name='builder_id'> <option value="1">Java</option> <option value="2">Python</option> </select> I am looking ...