有什么方法可以检测客户端是否下载了完整图片？

Question

我实现了一个主要是 CSS 幻灯片的网站。问题是在我的 phone 上，互联网连接不好，图片没有完成加载，下一张图片开始加载，这是糟糕的用户体验。有没有办法通过JS检测客户端是否加载完图片？

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

有什么方法可以检测客户端是否下载了完整图片？

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

javascript

events

dom

dom-events