Within my project, the left side of the content is contained within a div called ".container", and there's a preloader located in an element with the ID "#preloader."
Across all major browsers, the functionality works smoothly as intended - when all content has finished loading, the page fades in. However, when viewing in Internet Explorer (IE), I encounter two issues. Firstly, the container does not have any opacity at the beginning, and secondly, the #preloader is removed only after the page content has fully loaded.
Here is the CSS style for the container:
.container{
height: 100%;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
Additionally, here are the JavaScript functions:
function init_on_load(){
$("#preloader").remove();
$(".container").animate({opacity: 1}, {duration: 1000});
}
$(window).on("load",
function(){
init_on_load();
}
);
I would appreciate your insights on this issue. Do you have any ideas on what might be causing these problems? Thank you.