Full version: jsB@nk » Image » Preload Image with progress bar
URL: https://www.javascriptbank.com/preload-image-with-progress-bar.html
Use this JavaScript to not only preload any number of images before displaying them, but also, get a live update on it's progress through an update bar. Once the preloadiing is complete, the surfer is then directed to the page containing the preloaded images. Superbly useful and cool a creation.
Full version: jsB@nk » Image » Preload Image with progress bar
URL: https://www.javascriptbank.com/preload-image-with-progress-bar.html
<SCRIPT>// PUT ALL IMAGES IN AN ARRAY FOR PRELOADINGvar pics = new Array("photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg","photo52.jpg","photo6.jpg","photo72.jpg");// ENTER URL TO GOTO AFTER IT FINSHES PRELOADINGvar url = "http://javascriptbank.com/";// ASK USERS TO GO TO NEXT PAGE AFTER PRELOADING?var doConfirm = true;// ALLOW USER TO SKIP PRELOADING?var canSkip = true;//------------YOU ARE DONE, DON'T EDIT ANYTHING BEYOND THIS POINT-----------------//var imgObjs = new Array(pics.length);var loaded = 0;var total = pics.length;var cPercent = 0;var barLayer = null;var percentLayer = null;var statLayer = null;var doneMsgLayer = null;function getLayer(layerID) {if (document.getElementById)return document.getElementById(layerID);else if (document.all)return document.all[layerID];else return null;}function updateBar() {statLayer.innerHTML = "<font face=\"Arial\" color=\"#FFFFFF\"><B>" +loaded+ "/" +total+ "</B></font>";var percent = Math.round(loaded/total * 100);if (cPercent != percent){cPercent = percent;barLayer.style.width = (cPercent*3) +"px";percentLayer.innerHTML = "<font color=\"#BBBB00\"><B>" +cPercent+ "%</B></font>";}if (loaded == total){doneMsgLayer.innerHTML = "<a href=\"javascript:done()\"><font face=\"Arial\" color=\"#FFCC00\" size=\"2\"><B>Done (Click Here)</B></font></a>";if (doConfirm && confirm("Files have finish loading, continue to next page?"))done();}}function startLoading() {if (document.getElementById || document.all){barLayer = getLayer("bar");percentLayer = getLayer("percent");statLayer = getLayer("stat");doneMsgLayer = getLayer("doneMsg");if (canSkip)doneMsgLayer.innerHTML = "<a href=\"javascript:done()\"><font color=\"#FFCC00\" size=\"2\" face=\"Arial\">Skip Pre-Loading</font></a>";for (i=0; i<pics.length; i++){imgObjs[i] = new Image();imgObjs[i].onload = imgLoaded;imgObjs[i].onerror = imgFailed;imgObjs[i].src = pics[i];}}else{alert("You are likely running very old browser which is not compatible with preloading script. Maybe it is time to update your browser.\n\nProgram is skipping preloading.");window.location.replace(url);}}function done() {parent.window.location.replace(url);}function imgFailed() {alert("The following image failed to load, probably a broken link:\n" +this.src+ "\nPlease contact the webmaster of the site you are visiting about this. The program will skip this file now.");loaded++;updateBar();}function imgLoaded() {loaded++;updateBar();}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=startLoading()><DIV id=msg style="LEFT: 50px; WIDTH: 200px; POSITION: absolute; TOP: 0px; HEIGHT: 20px"><FONT face=Arial color=#dddddd size=4>Loading...</FONT></DIV><DIV id=bg></DIV><DIV id=bar></DIV><DIV id=percent style="LEFT: 330px; POSITION: absolute; TOP: 0px"><FONT color=#bbbb00><B>0%</B></FONT></DIV><DIV id=stat style="LEFT: 520px; POSITION: absolute; TOP: 0px"><FONT face=Arial color=#ffffff><B>0/0</B></FONT></DIV><DIV id=doneMsg style="LEFT: 620px; POSITION: absolute; TOP: 0px"></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->