I have implemented a website with a mainly CSS slideshow. The problem is that on my phone with bad internet connection the picture doesn't finish loading and the next picture starts getting loaded, which is bad UX. Is it possible to somehow detect whether the client has finished loading the image via JS?
You can use load event and something near lazyloading to achieve this
<img src="mypicture.jpg" onload="pictureLoadCallback(this)">
<img data-src="mypicture2.jpg" onload="pictureLoadCallback(this)">
[...]
<script>
var pictureLoadCallback = function(el) {
var next = el.nextElementSibling;
if(next.tagName === "IMG") {
next.src = next.getAttribute('data-src');
}
}
</script>
or use javascript event listener :
<img src="mypicture.jpg" class="imgLoad">
<img data-src="mypicture2.jpg" class="imgLoad">
[...]
<script>
var pictureLoadCallback = function(e) {
var next = e.currentTarget.nextElementSibling;
if(next.tagName === "IMG") {
next.src = next.getAttribute('data-src');
}
}
document.querySelector('.imgLoad').forEach(function(img){
img.addEventListener('load', pictureLoadCallback);
});
</script>