I have incorporated the iDangerous swiper for a slider on my webpage. However, due to slow image loading, the slider appears like a thin line before the images are fully loaded, as depicted in this image.
https://i.sstatic.net/gEzNZ.png
The use of imagecache from intervention image seems to be affecting the image load speed. Below is the code snippet for the slider where the default swiper slider lazy loading is implemented:
@foreach($players as $player)
<div class="swiper-slide">
<a href="/player/{{ $player->id }}/{{ $player->fullName }}">
<div class="card bg-dark text-white">
<img data-src="/imagecache/medium/{{ $player->image_filename }}" class="card-img swiper-lazy"/>
<div class="swiper-lazy-preloader"></div>
<div class="card-img-overlay">
<div class="card-content">
<h5 class="card-title">{{ $player->first_name }} {{ $player->last_name }}</h5>
<p class="card-text">
{{ $player->nationality }}
@if($player->position != '')
| {{ $player->position }}
@endif
</p>
</div>
</div>
</div>
</a>
</div>
@endforeach
Initially, only a line is displayed rather than the spinner, and I suspect it's due to the absence of a set height for the card image as shown in the SCSS below:
.card {
border: 1px solid $gray-border;
}
.card-img {
width: 100%;
}
.card-title {
margin: 0;
line-height: 1;
color: $white;
}
...
If I define the height, the slider loses its responsiveness. What I wish to achieve is implementing a blur-up technique commonly seen on websites, where a small blurred image precedes the full-sized one. Could someone advise on how to integrate this into the swiper slider?