The image displaying "Loading" fails to appear

My webpage includes a div styled with the following CSS:

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .35 ) 
                url('/NoAuth/cf/ajax-loader.gif')
                50% 50% 
                no-repeat;
}


/* Whenever the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

To trigger the "loading" class on the body when an .ajax call is made, I use the following jQuery function:

jQuery(document).ready(function () {
    jQuery('body').on({
      ajaxStart: function() {
        jQuery(this).addClass('loading');
      },
      ajaxStop: function() {
        jQuery(this).removeClass('loading');
      }
    });
});

However, I often encounter a situation where the background color changes during the ajax call, but the gif does not appear. Strangely, if I manually add the 'loading' class using 

jQuery('body').addClass('loading')
in the Firebug console, the image displays properly. Looking at the "Net" tab in Firebug reveals that the gif was only loaded after executing the .addClass command.

Is there a way to pre-load the background to ensure it appears consistently, or how can I address and prevent this issue?

jquerycssajax

Answer №1

Perhaps the reason behind this issue lies in the CSS attribute display:none. Why not hide it when the page is fully loaded? This way, the loading effect will be displayed while the document loads. You simply need to remove the display attribute from the .modal element.

Here's the JavaScript code:

jQuery(document).ready(function () {
    jQuery('body .modal').hide();
    jQuery('body').on({
      ajaxStart: function() {
        jQuery(this).addClass('loading');
      },
      ajaxStop: function() {
        jQuery(this).removeClass('loading');
      }
    });
});

Answer №2

In the instance where there are no HTML elements that match a particular style rule in a referenced stylesheet, it has been my observation that resources connected to that style rule will not be loaded. One potential solution to this issue is utilizing data URIs, as this ensures that the resource is already present within the stylesheet itself. It should be noted, however, that if you need to accommodate older browsers like IE7, this approach may not be suitable.

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

I am using the load function to extract the div content within the form, but I am encountering difficulty in submitting the input within the content

function xgonder(){ var veriler = $('#gonder').serialize(); $.ajax({ type: "POST", url: "sendurl", data: veriler, success:function(e){ $("#tamam").html(e); ...

ajaxformsload

Leveraging Ajax data within a Python script

I'm currently exploring ways to populate a PostgreSQL table using data obtained from an Ajax POST request in Python. The Ajax command I am using is as follows: function ajaxFct() { $.ajax({ async: true, type: "POST", url: ...

jquerypythonajaxpostgresqlpost

"Troubleshooting a PHP script: Why is my nested AJAX function not producing any results when utilizing the

My code includes a function with nested ajax calls that triggers when a form is submitted. The function is designed to submit form data, reload the table with new database entries, and verify if all results have been added successfully. When I click the s ...

phpjqueryajax

Using a repeating background in CSS with overflow displayed at the top rather than the bottom

Does anyone know how to make the repeating background 'start' fixed at the bottom of the div and overflow on the top? I want it to be the opposite of the default behavior. Let me illustrate what I'm trying to achieve with a small example. I ...

htmlcss

Display Custom Form Fields Based on Radio Button Selection

Being a new user of Yii, I've been immersed in it for less than 2 months. Currently, my focus is on creating a registration form that initially displays only 2 radio buttons - one representing a Person and the other an Organization. Upon selecting eit ...

ajaxformsyii

The issue with HTML where the header and footer elements are continuously repeating when

I'm struggling with the title header and footer repeating on every printed page. I just want to show the title at the top of the page and display the footer at the end of the print page. Can anyone provide a solution or suggestion? You can view my fid ...

javascripthtmlcssprinting

Add Django template without adding an extra line break

In my main.html template, I have the following code: <p>{% include "pouac.html" %}{% include "pouac.html" %}</p> The file pouac.html contains just one line: <span>pouac</span> When rendered, the main.html template generates two ...

htmlcssdjangodjango-templates

What is the best way to bring in an image when the resolution falls below 700 pixels?

Is there a way to import an image only if the screen resolution is greater than 700px? HTML: <picture> <img id="logo_mobile"> <!-- I have also tried this --> <source srcset="logomobile.jpg ...

htmlcss

Adjusting the height of a DIV element to suit the window dimensions

I am facing an issue with the following HTML code: <div id="subpageHeaderImageSection"> <div id="subpageHeaderLeft"> <span id="holdImageP"></span> <!--[if lte IE 10]><img id="igm" src="theImages/sub ...

javascriptjqueryhtmlcss

What is the best way to use a JavaScript function as a callback?

I'm struggling with understanding callbacks, especially how they function. Here is my function: function checkDuplicateIndex(values, callback) { $.ajax({ type: "POST", url: url, data: "command=checkIndexAlbumTracks& ...

javascriptjqueryajax

Whenever I make an AJAX call to update the queryset in my child template, the javascript suddenly ceases to function properly

I am using a comments.html child template with the following structure: <div class="commentsContainer"> {% for comment in comment_list %} ... {{ comment.text }} ... {% endfor %} </div> Whenever I click on a bu ...

jquerypythonajaxdjangodjango-templates

Find an XML element that shares a common attribute with another element at the same level

Is there a way to extract the href attribute value from certain nodes based on the presence of another node with a specific attribute? Specifically, I want to retrieve the links from all nodes that come after a span node with the class attribute set to " ...

jqueryxmlxpathxidel

What makes componentDidMount the ideal location to initiate AJAX requests?

It is quite common to see AJAX requests being fired at the componentDidMount hook in many React projects. However, I find it hard to understand this suggested practice. For example, consider a component where the AJAX request depends on a prop from the pa ...

javascriptajaxreactjs

Methods for retrieving and persisting the data from a particular row within a table using JavaScript or jQuery

Is there a way to store the selected row values of a table in an array of arrays using JavaScript / jQuery? Check out this JSFiddle I believe that we should listen for the event when the 'Show selected' button is clicked. For instance, in Java ...

javascriptjquery

Alternatives to using $.getJSON()

When utilizing jQuery within the React/Redux environment, what alternative library is typically used for handling straightforward REST calls instead of $.getJSON or $.postJSON? Is there a widely-used option that functions similarly to node's http mod ...

javascriptajaxrestreactjsredux

Is there an error when iterating through each table row and extracting the values in the rows?

Here is a basic table that I am attempting to iterate through in order to retrieve the value of each cell in every row where there are <td>s present. However, I encounter an error indicating that find does not exist despite having added jQuery. Any ...

javascriptjqueryhtml

cusel.js encountered an error due to attempting to use the 'in' operator to search for 'using' within the specified error

I attempted to implement the cusel.js (styled selects) library on my select elements, but unfortunately it's not functioning as expected. The selects change visually, however when I try to scroll through the options using jscrollpane, an error that I ...

javascriptjqueryhtml

unique HTML elements located inside a text box

I am working on a system that allows users to customize order confirmation emails by replacing placeholders with actual customer data. Currently, we use tags like {customer_name}, but this method can be confusing and prone to errors. My goal is to create ...

htmlcss

Loading a Div Element on the Fly

I have a variety of checkboxes that are generated through iteration from a collection using the foreach loop of the core tags in JSP with parameters ID (which represents the ID of the checkbox) and key. Both the ID and key are dynamically populated based o ...

jqueryhtmlajaxforms

Unable to get CSS First Child Pseudo Element to Work Properly

I'm having trouble with this code in CSS and would appreciate any help. I can't figure out why the margin-left won't apply to the first i element. Below is the CSS I'm using: header.site-header .right_side_menu i:first-child { marg ...

htmlcsscss-selectorspseudo-element