有什么方法可以检测客户端是否下载了全图？答案

【问题标题】：Any way to detect whether the client has downloaded a full picture?有什么方法可以检测客户端是否下载了全图？
【发布时间】：2021-11-09 18:27:24
【问题描述】：

我已经实现了一个主要使用 CSS 幻灯片的网站。问题是在我的手机上，网络连接不好，图片没有完成加载，下一张图片开始加载，这是糟糕的用户体验。是否可以通过某种方式检测客户端是否通过JS完成了图片加载？

【问题讨论】：

标签： javascript dom events dom-events

【解决方案1】：

您可以使用load 事件和类似延迟加载的东西来实现这一点

<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>

或使用 javascript 事件监听器：

<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>

【讨论】：

onload 方法是否适用于 loading="lazy"？
这可能需要进一步研究，但我认为loading="lazy" 将开始在浏览器的当前视图中加载每个图像（这是常见的延迟加载行为），因此在基本幻灯片放映中，它将加载可能出现在屏幕上，甚至被overflow: hidden 隐藏，因此有机会在开始时同时加载 2-3 张图像（因此它不会等待第一张图像加载），而其他图像将仅开始加载当活动幻灯片更改时。
我当前的代码类型否定了你的理论：图像在 HTML 中并且它们是隐藏的（不是溢出，但通常是隐藏的）并且当属性更改为可见时它会被加载，即使使用一个不错的互联网连接不知何故会产生短暂的闪烁效果并使幻灯片放映不流畅......所以我还有另一个问题摆在我面前。