window.onload function doesn't work on Mozilla Firefox

Question

I'm using a loading screen for a webpage and I use window.onload function.

Everything works great except in Mozilla Firefox browsers. When we first visit or refresh the page with ctrl+F5 combination, the loading screen never disappears. if we refresh the page only with F5, then it works.

I use the code below

$(window).load(function(e) {
    $("#body-mask").fadeOut(1000,function(){
        $(this).remove();
    });
});

I have also tried the code below but nothing changed.

window.onload = function () {
   $("#body-mask").fadeOut(1000,function(){
       $(this).remove();
   });
}

Why this is happening?

Please help.

Thanks in advance.

Why not try [`$(document).ready()`](http://api.jquery.com/ready/) instead? — Code Maverick, Apr 01 '13 at 15:38
Hey @Scott, $(document).ready() fires when the dom is loaded but I want the function to be fired when all the content including images etc.. is loaded — Onur Kucukkece, Apr 01 '13 at 16:56
@Onur - Ok, then [`$(window).load`](http://api.jquery.com/load-event/) is what you want. I would create a [jsFiddle](http://jsFiddle.net) to test what you want. If it works there, then most likely the problem would be in your markup or another script that interfering. — Code Maverick, Apr 01 '13 at 17:16
@Scott you're right, I've just found the problem, another script called jquery vegas is interfering with this function. Thank you for your help. — Onur Kucukkece, Apr 01 '13 at 17:24

score 9 · Accepted Answer · answered Apr 01 '13 at 21:31

The problem is caused by another jquery background plugin which is placed inside $(document).ready()

I moved it inside $(window).load() function, now it works perfect.

I have also moved another function to resize images on the page load. When it was inside $(document).ready() block, sometimes it was malfunctioning if loading time took too long but now it also works great.

function resizeImages(){
    //Some Code
}

$(window).load(function(){
    $("#body-mask").fadeOut(1000,function(){
        $(this).remove();
    });

    $.vegas({
        src: backURL , fade:0
    });

    resizeImages();
});

$(document).ready(function(){
    //Some Other code
});

@ppasler it was this jquery vegas plugin but probably it was version 1 by then. — Onur Kucukkece, Dec 26 '18 at 09:40

score 2 · Answer 2 · answered May 04 '14 at 11:50

2

I got the same problem when mistyped the type attribute in the script tag:

<script type="text/javascript">

answered May 04 '14 at 11:50

bandolero

131
1
7

score 1 · Answer 3 · edited May 23 '17 at 11:45

1

Try This:

$(document).ready(function(e) {
    $("#body-mask").fadeOut(1000,function(){
        $(this).remove();
    });
});

Read for load and ready functions difference What is the difference between $(window).load and $(document).ready?

edited May 23 '17 at 11:45

Community

1
1

answered Apr 01 '13 at 15:41

Rohan Kumar

40,431
11
76
106

1

If your `page` has more than 1 `window.load` `function` then only 1 will work. – Rohan Kumar Apr 01 '13 at 15:42
I have only 1 window.load function, and $(document).ready() is neing fired when the dom is loaded but I want the function to be fired when all the content including images etc.. is loaded – Onur Kucukkece Apr 01 '13 at 16:57

Saeed Afshari · Answer 4 · 2013-04-01T20:18:01.850

0

You must call function on initialization like :

window.onload = init();

in other word modify your code to:

window.onload = function () {
$("#body-mask").fadeOut(1000,function(){
    $(this).remove();
});
}();// Added

Copy following code in file then open it with firefox

<script>
window.onload = function () {
alert('saeed')
}();
</script>

edited Apr 01 '13 at 20:18

answered Apr 01 '13 at 15:41

Saeed Afshari

939
1
9
17

This calls the handler immediately without waiting for the document to be fully loaded. – Marius Gedminas Jan 19 '22 at 12:08

window.onload function doesn't work on Mozilla Firefox

4 Answers4

Linked