How to Add Loading Gif Image with Lazy Load in Slick Slider using jQuery

Loading gif on the image slider is very useful to make it user-friendly. If the slider image size is large, the loading image is a must-have element. Loader gif notifies that the image is loading from the server with an animation.

If you are using jQuery slick carousel to add slider in HTML, the loading gif image can be a useful feature to make the slider user-friendly. You can add a loader on the slider to display gif images when the slider images are loading from the server. Also, the loading gif must hide when the slider image is loaded completely.

The following code helps to integrate the slick carousel in the HTML webpage and add a loading gif image in the slider with Lazy Load using jQuery.
jQuery and Slick Plugin Library Files:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

JavaScript Code:

<script>
$(document).ready(function(){
    $('.slick-slider').slick({
        arrows: true,
        lazyLoad: 'ondemand',
        slidesToShow: 1,
        slidesToScroll: 1
    });

    $('img[data-lazy]').one('load', function(e) {
        if (this.complete) {
            $(this).siblings('.ajax-loader').remove();
        }
    });
});
</script>

CSS Code:

.container {
    width: 350px;
    margin: auto;
    background-color: #fff;
}
.slick-slide {
    height:390px !important;
}

.slick-slide img:first-child {
    width: 100%;
    height:390px !important;
    object-fit: cover;
}
.slick-slide {
    position: relative;
}
.ajax-loader {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 32px;
    height: 32px;
}

HTML Code:

<div class="container">
    <div class="slick-slider">
        <div>
            <img data-lazy="https://download.unsplash.com/photo-1552519507-da3b142c6e3d" />
            <img src="https://i.imgur.com/xyA2TRg.gif" class="ajax-loader" />
        </div>
        <div>
            <img data-lazy="https://download.unsplash.com/photo-1542362567-b07e54358753" />
            <img src="https://i.imgur.com/xyA2TRg.gif" class="ajax-loader" />
        </div>
        <div>
            <img data-lazy="https://download.unsplash.com/photo-1503736334956-4c8f8e92946d" />
            <img src="https://i.imgur.com/xyA2TRg.gif" class="ajax-loader" />
        </div>
        <div>
            <img data-lazy="https://download.unsplash.com/photo-1566274360936-69fae8dc1d95" />
            <img src="https://i.imgur.com/xyA2TRg.gif" class="ajax-loader" />
        </div>
        <div>
            <img data-lazy="https://download.unsplash.com/photo-1494697536454-6f39e2cc972d" />
            <img src="https://i.imgur.com/xyA2TRg.gif" class="ajax-loader" />
        </div>
    </div>
</div>