Fade preloader on page load

Question

I have a gif which I want to set as a website preloader. But when I do so the preloader doesn't dissappear even after page load. I have tried various java scripts but none of them proved to be of use.

 $(window).on("load", function() { $(".loading").fadeOut("slow"); });

 .loading { background: #f4ded3 url('https://i.pinimg.com/originals/db/e6/b9/dbe6b90d0fd0d209001cb64eefd038d7.gif') no-repeat center center; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-size: contain; z-index: 9999999; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="loading"></div> <div class="content">Test</div>

Answer 1

Alternatively you can do this

 $(document).ready(function() { $(".loading").fadeOut("slow"); });

 .loading { background: #f4ded3 url('https://i.pinimg.com/originals/db/e6/b9/dbe6b90d0fd0d209001cb64eefd038d7.gif') no-repeat center center; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-size: contain; z-index: 9999999; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="loading"></div> <div class="content">Test</div>