Version complète: jsB@nk » Image » Preload Image avec barre de progression
URL: https://www.javascriptbank.com/preload-image-with-progress-bar.html
Utilisez cette JavaScript non seulement pour un certain nombre de pré-charge les images avant de les afficher, mais aussi, obtenir une mise à jour en direct sur les progrès de la mise à jour par le biais d'un bar. Une fois le preloadiing est terminée, l'internaute est alors redirigé vers la page contenant les images préchargées. Superbement utile et frais d'une création.
Version complète: jsB@nk » Image » Preload Image avec barre de progression
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-->