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

<imgsrc="mypicture.jpg"onload="pictureLoadCallback(this)"><imgdata-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">
<imgdata-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>