Any Way To Detect Whether The Client Has Downloaded A Full Picture?

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 start

Solution 1:

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>