js加载图片带进度条

在JavaScript中加载图片并显示进度条可以通过多种方式实现，主要依赖于HTML5的XMLHttpRequest对象或者fetch API来获取图片数据，并结合进度事件来更新进度条。以下是实现这一功能的基础概念和相关步骤：

基础概念

XMLHttpRequest: 一个内置在浏览器中的接口，允许开发者发送HTTP请求并处理响应。
Fetch API: 现代化的网络请求API，提供了更强大和灵活的网络请求能力。
Progress Events: 当进行数据传输时，浏览器会触发一系列的进度事件，如loadstart, progress, load, loadend等。

实现步骤

创建一个HTML结构，包含一个用于显示进度的元素和一个用于显示图片的元素。
使用JavaScript发起图片请求，并监听进度事件。
根据接收到的数据量更新进度条。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Loading with Progress Bar</title>
<style>
  #progressBar {
    width: 100%;
    background-color: #ddd;
  }
  #progress {
    width: 0%;
    height: 30px;
    background-color: #4CAF50;
    text-align: center;
    line-height: 30px;
    color: white;
  }
</style>
</head>
<body>

<div id="progressBar">
  <div id="progress"></div>
</div>
<img id="image" src="" alt="Loading..." style="display:none;">

<script>
function loadImage(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';

  xhr.onloadstart = function() {
    document.getElementById('progress').style.width = '0%';
  };

  xhr.onprogress = function(event) {
    if (event.lengthComputable) {
      var percentComplete = (event.loaded / event.total) * 100;
      document.getElementById('progress').style.width = percentComplete + '%';
      document.getElementById('progress').textContent = Math.round(percentComplete) + '%';
    }
  };

  xhr.onload = function() {
    if (xhr.status === 200) {
      var img = document.getElementById('image');
      img.src = URL.createObjectURL(xhr.response);
      img.style.display = 'block';
    }
  };

  xhr.send();
}

// Usage
loadImage('path_to_your_image.jpg');
</script>

</body>
</html>