进度条问题（使用 onloadstart、onloadend、onloadprogress）

Question

HTML 代码：

<img class="boxImg" src="IMAGE_URL" onloadstart="showProgressBar('#loadBar')" onloadend="hideProgressBar('#loadBar')" />
<div id="loadBar">Loading</div>

Javascript 代码：

function showProgressBar(div) { console.log("Load begin"); $(div).fadeIn(50);}
function hideProgressBar(div) { console.log("Load end");   $(div).fadeOut(50);}

图像加载正常，但没有调用 Javascript 函数（控制台中没有出现任何内容，div 没有效果）。

Answer 1

您正在尝试在 img 元素上使用 onloadstart 和 onloadend。这些就是所谓的progress events。

进度事件目前仅对video 和audio HTML 元素有效。它们在 img 元素上无效。

Answer 2

onloadstart 和 onloadend 仅支持音频和视频标签 - http://www.w3schools.com/tags/av_event_loadstart.asp