How can I fadeout my preloader after all contents of my website (including images, videos etc.) has been loaded?

Question

• I want to use a preloader animation for my website and want it to fadeout after my site's all content has loaded. I have tried this way:

                <script>
                
                    window.onload = function () {
                        document.querySelector(".loader-container").style.display = 'none';
                    };
                
                 
                </script> 

• But sometimes the animation is going infinitely and i can't see any content of my website and sometimes it vanishes before the images had loaded.I have searched google for various alternatives but none worked.

It will be a great help if anyone could help a beginner like me(it has been 3 months) by providing a code snippet to accomplish this.