This is an interesting issue, sometimes we see in FireFox 9 and above an issue where the tab title will actually get set to a state where it says “Connecting” and the spinner is constantly in motion.
One of the things I found recently when I discovered this was quickly writing out DOM elements and then Removing them.
Example
Take the following code, it appends a Node element to the DOM. As soon as the onload or onerror function is fired it removes the element.
var urls = [
...
];
for (var i = 0; i <= urls.length; i++){
addObjectElement(url);
}
function addObjectElement(url){
var obj = document.createElement("object");
obj.data = url;
obj.onload = obj.onerror = function() { removeElement(obj) };
document.appendChild(obj);
}
function removeElement(item) {
var parent = item.parentElement;
p.removeChild(item);
}
The previous could would end up causing an issue where FireFox would actually think it was still working. Thus creating the "Connecting" issue and the spinning icon.
How do we fix it?
Well, actually the fix is simple. If you wait a small amount of time to actually do the removal, firefox will unlock the thread rendering it back to the being normal.
Let's take a look.
The fix
var urls = [
...
];
for (var i = 0; i <= urls.length; i++){
addObjectElement(url);
}
function addObjectElement(url){
var obj = document.createElement("object");
obj.data = url;
obj.onload = obj.onerror = function() { setTimeout(function(){ removeElement(obj)}, 5); };
document.appendChild(obj);
}
function removeElement(item) {
var parent = item.parentElement();
p.removeChild(item);
}
Once we add the setTimeout to the code, even at a small 5ms delay, we unlock the thread and cause firefox to resume normal operation.
