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.

Answer 1

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
});

Answer 2

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

<script type="text/javascript">