图片加载进度实时显示

一、概述

在网页中加载图片是很常见的场景，但一些大图片、网络延迟等因素都会导致图片加载时间延长。在用户等待图片加载时，为了提升用户体验，可以通过实时显示图片加载进度来让用户了解当前图片加载的进度，从而缓解用户的焦虑感和等待时间。本文将详细介绍如何实现图片加载进度实时显示的功能。

二、实现方式

实时显示图片加载进度的方式一般有两种，分别是：使用canvas绘制进度条、使用原生浏览器提供的progress标签。

使用canvas绘制进度条

使用canvas绘制进度条的方式，实现起来较为复杂，但具有可自定义性强、样式多样化等优点。下面是使用canvas绘制进度条的主要步骤：

1. 在HTML文档中使用<canvas> 标签创建一个canvas元素，用于绘制进度条：

<canvas id="progress" width="200" height="10"></canvas>

1. 在JavaScript中获取图片并绑定加载事件，同时在事件处理函数中计算出图片加载的进度，并用canvas绘制出进度条。具体的代码如下：

var img = new Image();
img.src = 'img/test.jpg';
img.onload = function() {
  var cvs = document.getElementById('progress').getContext('2d');
  cvs.fillStyle = '#ccc';
  cvs.fillRect(0, 0, 200, 10);
  cvs.fillStyle = '#f00';
  cvs.fillRect(0, 0, 200 * img.width / img.height, 10);
}

以上代码中，首先创建一个Image对象用于获取图片，然后把图片url赋值给Image对象的src属性。接着在Image对象的onload事件处理函数中，获取canvas元素并获取画布对象，然后填充一个灰色矩形作为进度条的背景，并用图片已加载大小/总大小计算出进度并填充一个红色矩形作为进度条。

使用原生标签progress

使用原生标签progress实现进度条的方式相对简单，只需要在HTML文档中加入progress标签并给定一个fetch或XHR请求的value属性值，浏览器会自动根据请求下载完成的字节数与总字节数之间的比例改变进度条的宽度。具体的代码如下：

<progress id="prog" min="0" max="100" value="0"></progress>

上面的代码中，min和max属性用于定义进度条的范围，value属性用于定义当前进度条的值。在JavaScript中，设置进度条的值只需要修改value属性即可。

三、总结

通过使用canvas绘制进度条或使用浏览器提供的progress标签，我们可以很容易地实现图片加载进度的实时显示功能。具体的选择方式可以根据自身的实际需求和技术水平来进行选择。