How to load slick slider fisrt

Question

How to load slick slider before page load. I see that when the page is finished loading, slick will load. I tried putting the slick slider on the header but it still loads after loading the page. Leaving the photo too long doesn't look good Especially when there are thumbnails

 $(window).load(function() {
      $('.slider-post-dev .ecs-posts').slick({
          dots: false,
          infinite: false,
          speed: 300,
          slidesToShow: 3,
          slidesToScroll: 1,
          responsive: [
            {
              breakpoint: 1024,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 1,
                infinite: true,
                dots: true
              }
            },
            {
              breakpoint: 600,
              settings: {
                slidesToShow: 2,
                slidesToScroll:1
              }
            },
            {
              breakpoint: 480,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1
              }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
          ]
        });
        /*===============end gallery==================*/
});

I tried putting the jquery slick slider in the header

 wp_enqueue_style( 'slick-style', get_stylesheet_directory_uri() . '/libs/slick/slick.css', array( 'dashicons' ) );
wp_enqueue_script( 'slick-script', get_stylesheet_directory_uri() . '/libs/slick/slick.js', array(), '', true );