Any way to detect whether the client has downloaded a full picture?-CodePudding

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?

CodePudding user response：

You can use load event and something near lazyloading to achieve this

<img src="mypicture.jpg" onl oad="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>