The loading icon on Chrome continues to rotate while handling XMLHttpRequest requests

Question

The loading icon on Chrome continues to rotate while handling XMLHttpRequest requests

I'm currently developing a web app using AJAX with Comet/Long Polling to ensure real-time updates on the web page. I've noticed that in Chrome, the page is constantly loading (tab icon keeps spinning).

Initially, I thought this was a normal behavior for Google Chrome when working with Ajax, as even Google Wave exhibited the same behavior.

However, today I observed that Google Wave no longer shows the spinning loading icon. Does anyone know how they managed to fix this issue?

Below is the code snippet for my AJAX call:

var xmlHttpReq = false;
// For Mozilla/Safari
if (window.XMLHttpRequest) {
   xmlHttpReq = new XMLHttpRequest();
}
// For Internet Explorer
else if (window.ActiveXObject) {
   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReq.open('GET', myURL, true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.onreadystatechange = function() {
   if (xmlHttpReq.readyState == 4) {
      updatePage(xmlHttpReq.responseText);
   }
}
xmlHttpReq.send(null);

javascript ajax google-chrome comet long-polling

Answer 1

Answer №1

I shamelessly borrowed Oleg's test case and made some adjustments to mimic long-polling behavior.

load.html:

<!DOCTYPE html>
<head>
  <title>Example showcasing the issue with jQery.load</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  jQuery(document).ready(function() {
    $('#main').load("test.php");
  });
  </script>
</head>
<body>
  <div id='main'></div>
</body>
</html>

test.php:

<?php
  sleep(5);
?>
<b>OK!</b>

The outcome is intriguing: Firefox and Opera do not display a loading indicator during XMLHTTPRequests, while Chrome keeps it spinning. I have a suspicion that Google Wave may no longer utilize long polling (opting for periodic polls instead) to conserve resources, but I cannot confirm this without an account.

EDIT: I've discovered a solution: by introducing a slight delay in loading test.php, even if minimal, the loading indicator halts once load.html has been fully loaded:

jQuery(document).ready(function() {
  setTimeout(function () {
    $('#main').load("test.php");
  }, 0);
});

As discussed in a comment on another post, when the browser regains control to finalize page rendering, the spinning indicator ceases. An added benefit is that the request cannot be interrupted by pressing Esc.

Answer 2

I shamelessly borrowed Oleg's test case and made some adjustments to mimic long-polling behavior.

load.html:

<!DOCTYPE html>
<head>
  <title>Example showcasing the issue with jQery.load</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  jQuery(document).ready(function() {
    $('#main').load("test.php");
  });
  </script>
</head>
<body>
  <div id='main'></div>
</body>
</html>

test.php:

<?php
  sleep(5);
?>
<b>OK!</b>

The outcome is intriguing: Firefox and Opera do not display a loading indicator during XMLHTTPRequests, while Chrome keeps it spinning. I have a suspicion that Google Wave may no longer utilize long polling (opting for periodic polls instead) to conserve resources, but I cannot confirm this without an account.

EDIT: I've discovered a solution: by introducing a slight delay in loading test.php, even if minimal, the loading indicator halts once load.html has been fully loaded:

jQuery(document).ready(function() {
  setTimeout(function () {
    $('#main').load("test.php");
  }, 0);
});

As discussed in a comment on another post, when the browser regains control to finalize page rendering, the spinning indicator ceases. An added benefit is that the request cannot be interrupted by pressing Esc.

Answer 3

Answer №2

Apologies for the broad response, but if you're looking to create a program that is more compatible across different browsers, consider using jQuery or another preferred library instead of lower-level tools like XMLHttpRequest and ActiveXObject("Microsoft.XMLHTTP").

UPDATE: I set up two simple HTML files: test.htm and load.htm in the same web directory (you can view them at this URL ). I didn't observe the issue you mentioned in your question. Compare these files with your examples to troubleshoot your problem.

load.htm:

<!DOCTYPE html PUBLIC
          "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
  <title>Demonstration of the jQery.load problem</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function() {
    $('#main').load("test.htm");
  });
  </script>
</head>

<body>
  <div id='main'></div>
</body>
</html>

test.htm:

<b>OK!</b>

Answer 4

Apologies for the broad response, but if you're looking to create a program that is more compatible across different browsers, consider using jQuery or another preferred library instead of lower-level tools like XMLHttpRequest and ActiveXObject("Microsoft.XMLHTTP").

UPDATE: I set up two simple HTML files: test.htm and load.htm in the same web directory (you can view them at this URL ). I didn't observe the issue you mentioned in your question. Compare these files with your examples to troubleshoot your problem.

load.htm:

<!DOCTYPE html PUBLIC
          "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
  <title>Demonstration of the jQery.load problem</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function() {
    $('#main').load("test.htm");
  });
  </script>
</head>

<body>
  <div id='main'></div>
</body>
</html>

test.htm:

<b>OK!</b>

Answer 5

Answer №3

I encountered a challenge with inserting snippets into Ace Editor using the Snippet Manager, similar to your issue with jQuery or Ajax. During page load, inserting code into the editor caused the page to appear stuck, indicated by a perpetually spinning tab icon. Utilizing .setTimeout() yielded inconsistent results - functioning when the page loaded swiftly but failing when loading was slower. This inconsistency may have resulted from not enclosing the code within $(document).ready() and instead placing it at the end of the document body.

To address the perpetual spinning tab icon without relying on jQuery, I implemented the following solution:

var checkPageLoad = setInterval(function() {
    if( document.readyState === 'complete' ) {

        clearInterval(checkPageLoad);
        // perform desired action

    }    
}, 5);

In my scenario, the "// perform desired action" segment entailed:

ace.config.loadModule('ace/ext/language_tools', function () {
    myEditorInstance.insertSnippet( 'some string' );
});

Answer 6

I encountered a challenge with inserting snippets into Ace Editor using the Snippet Manager, similar to your issue with jQuery or Ajax. During page load, inserting code into the editor caused the page to appear stuck, indicated by a perpetually spinning tab icon. Utilizing .setTimeout() yielded inconsistent results - functioning when the page loaded swiftly but failing when loading was slower. This inconsistency may have resulted from not enclosing the code within $(document).ready() and instead placing it at the end of the document body.

To address the perpetual spinning tab icon without relying on jQuery, I implemented the following solution:

var checkPageLoad = setInterval(function() {
    if( document.readyState === 'complete' ) {

        clearInterval(checkPageLoad);
        // perform desired action

    }    
}, 5);

In my scenario, the "// perform desired action" segment entailed:

ace.config.loadModule('ace/ext/language_tools', function () {
    myEditorInstance.insertSnippet( 'some string' );
});

Answer 7

Answer №4

use the following code snippet

function createHTTPRequest() {
 var httpRequest = false;
 if (window.XMLHttpRequest) {
  httpRequest = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  try {
   httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
   try {
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
   } catch(e) {
    httpRequest = false;
   };
  };
 };
 return httpRequest;
};

Answer 8

use the following code snippet

function createHTTPRequest() {
 var httpRequest = false;
 if (window.XMLHttpRequest) {
  httpRequest = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  try {
   httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
   try {
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
   } catch(e) {
    httpRequest = false;
   };
  };
 };
 return httpRequest;
};

The loading icon on Chrome continues to rotate while handling XMLHttpRequest requests

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issue with Kaltura thumbnail video not rendering within a script tag in React, resulting in blank space instead

Implementing double dependent dropdown functionality using Ajax in CodeIgniter

What could be causing the <img src= ' '/> tag to malfunction in Express?

Passing data between parent and child components within an Angular application using mat tab navigation

Tips for incorporating various color schemes into all sides of a shape generated through the extrude geometry feature in three.js

Apexcharts tends to be unreliable upon dashboard loading, frequently appearing and disappearing unpredictably

What causes this loop to operate in one location but not in another?

How will SEO be impacted if content is concealed using jQuery or JavaScript?

Vue.js: Error 404 - POST request endpoint not found

How can jQuery identify words of a certain length within a string?

The form is refusing to submit even after using the "return false

Tips for integrating Twitter sharing functionality in React JS

Importing multiple exports dynamically in Next.js

Guide on transmitting the capabilities to the Testdroid server

Encountering an issue when trying to execute a JavaScript script using capybara/selenium in a Ruby environment

Mobile version experiencing issue with Navbar not collapsing

Exploring the process of generating, monitoring, and initiating personalized events in ReactJS

How can one elegantly deal with invalid arguments in JavaScript?

Is there a way to collapse an element by clicking either the content inside the div or the button within the div?

Ways to identify when a browser has disabled JavaScript and present a notification