JSFiddle - React, Tailwind, and code Playground
HTML
<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img1" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img2" width="300" height="451" />
<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img3" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img4" width="300" height="451" />
<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img5" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img6" width="300" height="451" />
JavaScript
GetRumdomStr = function () {
var str = "";
var maxNum = 10;
var minNum = 0;
var n = Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum;
for (var i = 1; i <= 50; i++) {
n = Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum;
str += n.toString();
}
return str;
};
$(document).ready(function () {
$('img').hide(); //先把所有圖片先隱藏
var ImgCount = $('img').length; //取得圖片的個數
$('img').each(function () {
var str = GetRumdomStr(); //請忽略,讓圖片加隨機亂數,視為模擬未曾下載過的圖片
var url = $(this).attr("src");
$(this).attr("src", url + "?" + str);
function ImageLoading() {
msg = "Image ID : " + this.id + "....done";
console.log(msg);
$('#msg').append("<div>" + msg + "</div>");
$(this).fadeIn(2000);
ImgCount--;
if (ImgCount === 0) {
console.log("All images Loaded..");
}
}
if ($(this).complete) {
imageLoaded.call(this);
} else {
$(this).one('load', ImageLoading);
}
});
});