Progress Bar Issue (using onloadstart, onloadend, onloadprogress)

问题

HTML code:

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

Javascript code:

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

The image loads fine but the Javascript functions are not called (nothing appears in the console and the div does not have an effect).

回答1:

onloadstart and onloadend supported only audio and video tags - http://www.w3schools.com/tags/av_event_loadstart.asp

回答2:

You are trying to use onloadstart and onloadend on the img element. These are what are known as progress events.

Progress events are currently only valid on video and audio HTML elements. They are not valid on img elements.

来源：https://stackoverflow.com/questions/16885257/progress-bar-issue-using-onloadstart-onloadend-onloadprogress