Preparation Code Preparation HTML (this will be inserted in the <body>
of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries) <script src ="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" >
</script >
<div id ="img_wrap" >
<img src ="http://www.windows2universe.org/earth/images/earth_globe_256pix.jpg" />
<img src ="http://www.windows2universe.org/earth/images/earth_globe_256pix.jpg" />
<img src ="http://www.windows2universe.org/earth/images/earth_globe_256pix.jpg" />
<img src ="http://www.windows2universe.org/earth/images/earth_globe_256pix.jpg" />
<img src ="http://www.windows2universe.org/earth/images/earth_globe_256pix.jpg" />
</div >
<p id ="p_status" >
0%
</p >
Setup JS var p_status = document .getElementById ('p_status' ),
img_wrap = document .getElementById ('img_wrap' ),
img = img_wrap.getElementsByTagName ('img' ),
img_amount = img.length ,
load_each = 100 / img_amount,
Math _Round, Add _Load, jQuery_Round;
if (p_status.addEventListener ) {
Math _Round = function (r ) {
load_percent += load_each;
p_status.textContent = Math .round (load_percent) + "%" ;
r.removeEventListener ('load' , Math _Round, false );
};
Add _Load = function (i ) {
i.addEventListener ('load' , Math _Round(i), false );
};
jQuery_Round = function ( ) {
load_percent += load_each;
p_status.textContent = Math .round (load_percent) + "%" ;
};
} else {
Math _Round = function (r ) {
load_percent += load_each;
p_status.innerText = Math .round (load_percent) + "%" ;
r.detachEvent ('onload' , Math _Round);
};
Add _Load = function (i ) {
i.attachEvent ('onload' , Math _Round(i));
};
jQuery_Round = function ( ) {
load_percent += load_each;
p_status.innerText = Math .round (load_percent) + "%" ;
};
}
Teardown JS