Magento 2: Page show pre image load on page load and hide

Product detail page of my Magento web loads quite slowly.
I would like to set a pre-loader on the page, which doesn’t show the site until page loads completely, then hides the loader. I have tried below option but it is not working.

<script>//paste this code under the head tag or in a separate js file.
    // Wait for window load
    $(window).load(function() {  
      // Animate loader off screen
      $(".se-pre-con").fadeOut("slow");; 
  });
</script>

<body>
  <div class="se-pre-con"></div>
  <style> 
    .se-pre-con {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: url(../images/Preloader_11.gif) center no-repeat #fff;
    }
  </style>
</body>