javascript - 进度条问题(使用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 元素上无效。