js图片加载进度

在JavaScript中实现图片加载进度，通常涉及到监听图片的加载事件，并通过一些计算来得到加载的进度百分比。

基础概念：

图片加载事件：如load、progress（通常与XMLHttpRequest或fetch API一起使用，但原生的Image对象不支持progress事件）、error。
进度计算：通常是通过已加载的字节数除以总字节数来得到进度百分比。

相关优势：

用户体验提升：让用户知道图片正在加载，减少用户的等待焦虑。
性能监控：开发者可以通过加载进度来监控图片加载的性能，优化网站或应用的性能。

类型：

单张图片加载进度
多张图片加载进度（例如图片懒加载时的进度显示）

应用场景：

图片库或画廊：在用户浏览大量图片时显示加载进度。
预加载场景：在页面渲染前预加载图片，并显示加载进度。
懒加载：当用户滚动页面时按需加载图片，并显示当前加载进度。

问题与原因：

如果图片加载进度不准确，可能是因为浏览器缓存了图片，导致load事件在进度计算之前触发。
如果使用XMLHttpRequest或fetch API加载图片数据，并尝试监听progress事件，需要注意这些API通常用于加载文本或二进制数据，而不是直接用于Image对象。

解决方法：

对于单张图片，可以使用Image对象的onload和onerror事件来检测加载完成或失败，但由于原生的Image对象不支持进度事件，如果需要显示进度，可以通过创建一个XMLHttpRequest对象来加载图片数据，并监听其progress事件。

示例代码（使用XMLHttpRequest监听图片加载进度）：

function loadImageWithProgress(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';

    xhr.onloadstart = function(e) {
        if (e.lengthComputable) {
            console.log('开始加载');
        }
    };

    xhr.onprogress = function(e) {
        if (e.lengthComputable) {
            var percentComplete = (e.loaded / e.total) * 100;
            console.log('加载进度: ' + percentComplete + '%');
            // 可以通过callback函数传递进度信息
            if (callback) callback(percentComplete);
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            var img = new Image();
            img.src = URL.createObjectURL(xhr.response);
            img.onload = function() {
                URL.revokeObjectURL(img.src);
                console.log('加载完成');
                if (callback) callback(100);
            };
        }
    };

    xhr.send();
}

// 使用方法
loadImageWithProgress('path/to/image.jpg', function(progress) {
    // 更新进度条或执行其他操作
    console.log('当前进度：' + progress + '%');
});