Imagen de carga previa

RootK · #1 (**permalink**) 11/12/2002, 13:31

Hola.. he visto algunas paginas (no flash), que cuando son algo pesadas tienen una imagen o un mensaje que dice "espere a que cargue" y hasta que este la page completa.. se quita la imagen y se muestra la page... como se hace esto..???

Gracias y saludos

Sette · #2 (**permalink**) 11/12/2002, 13:33

Yo no sé komo se hace, pero tb me interesa. no es mala idea poner eso en la web para mientras karga

CORE · #3 (**permalink**) 11/12/2002, 14:15

cheken esto

Index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>preload....silentrage</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<SCRIPT language=Javascript src="preload.js"></SCRIPT>

<SCRIPT language=JavaScript1.2>

startingColor = new Array() // <-- Do not modify!
endingColor = new Array() // <-- Do not modify!

// YOU MAY MODIFY THE FOLLOWING:
var yourImages = new Array
("images/imajenARRIBA4.gif","images/flecha.gif","images/bannerblacksnow.gif","images/minibanner.gif","images/bannerbostex.gif","images/fondotablas2.gif","images/bannerfafisco.jpg","images/bannershadow.gif","images/bannerrumba.gif","images/bannerhunter.gif","images/bannerradiation.gif","images/bannermistikal.gif","images/bannersaiko.gif","images/bannerdarkhouse.jpg","images/bannerdrksoft.gif","images/banneranimaculo.gif","images/bannerdarksilem.gif","images/fondotablas3.gif","images/bannerolemax.gif","images/bannertxunamy.gif") // Fill this array with the images you wish to preload
var locationAfterPreload = "inicio.htm" // The script will redirect here when the preloading finishes *successfully*
var preloadbarWidth = 190 // The length of the preload bar. Should be greater than total amount of images you want to preload!
var preloadbarHeight = 10 // The height of the gradient/preload bar
var backgroundOfGradient = "#FFFFFF" // Default color while the preload bar is "filling up"

// Color the preloadbar is starting with - enter 1st, 3rd and 5th numbers/letters of color code
startingColor[0] = "0"
startingColor[1] = "9"
startingColor[2] = "9"

// Color the preloadbar is going to end up with - enter the 1st, 3rd and 5th numbers/letters of color code
endingColor[0] = "0"
endingColor[1] = "9"
endingColor[2] = "9"

// FOR TROUBLESHOOTING:
var gap = 3 // PLAY AROUND WITH THIS SETTING IF YOU GET A JAVASCRIPT ERROR!!! 2 is the minumum value!!!

// DO NOT MODIFY ANYTHING BEYOND THIS POINT!!!

if (!document.all) location.replace(locationAfterPreload)
var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();
var convert = new Array("0","1","2","3","4","5","6","7","8","9","a", "b","c","d","e","f"), imgLen = yourImages.length;
var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
var num = Math.floor(preloadbarWidth/gap);
for (i = 0; i < 3; i++) {
startingColor[i] = startingColor[i].toLowerCase();
endingColor[i] = endingColor[i].toLowerCase();
startingColor[i] = eval(startingColor[i]);
endingColor[i] = eval(endingColor[i]);
diff[i] = (endingColor[i]-startingColor[i])/num;
ones[i] = Math.floor(diff[i]);
sixteens[i] = Math.round((diff[i] - ones[i])*15);
}
endingColor[0] = 0;
endingColor[1] = 0;
endingColor[2] = 0;
i = 0, j = 0;
while (i <= num) {
hilite[i] = "#";
while (j < 3) {
hilite[i] += convert[startingColor[j]];
hilite[i] += convert[endingColor[j]];
startingColor[j] += ones[j];
endingColor[j] += sixteens[j];
if (endingColor[j] > 15) {
endingColor[j] -= 15;
startingColor[j]++;
}
j++;
}
j = 0;
i++;
}
function loadImages() {
for (i = 0; i < imgLen; i++) {
preImages[i] = new Image();
preImages[i].src = yourImages[i];
loaded[i] = 0;
cover[i] = Math.floor(num/imgLen)*(i+1)
}
cover[cover.length-1] += num%imgLen
checkLoad();
}
function checkLoad() {
if (pending) { changeto(); return }
if (currCount == imgLen) { location.replace(locationAfterPreload); return }
for (i = 0; i < imgLen; i++) {
if (!loaded[i] && preImages[i].complete) {
loaded[i] = 1; pending++; currCount++;
checkLoad();
return;
}
}
setTimeout("checkLoad()",10);
}
function changeto() {
if (h+1 > cover[currCount-1]) {
var percent = Math.round(100/imgLen)*currCount;
if (percent > 100) while (percent != 100) percent--;
if (currCount == imgLen && percent < 100) percent = 100;
defaultStatus = "Cargadas " + currCount + " de " + imgLen + " imagenes [" + percent + "%].";
pending--;
checkLoad();
return;
}
eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
h++;
setTimeout("changeto()",1);
}
defaultStatus = "Cargadas 0 de " + imgLen + " imagenes [0%]."
// end hiding -->
</SCRIPT>

<META content="Microsoft FrontPage 5.0" name=GENERATOR>
<STYLE fprolloverstyle>A:hover {color: #4d5a7d; font-family: Verdana}
</STYLE>
</HEAD>
<BODY oncontextmenu="return false" onselectstart="return false"
ondragstart="return false" style="FONT-SIZE: 8pt; FONT-FAMILY: Verdana"
text=#000000 vLink=#000000 aLink=#000000 link=#000000 bgColor=#5C6778
leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
<DIV align=center><FONT color=#4d5a7d>.<BR>.<BR></FONT> <P>
<SCRIPT language=JavaScript1.2>

</SCRIPT>
</P>
<P><FONT
face=Verdana size=1>[------- Cargando imágenes------</FONT><FONT face=Verdana
color=#cc0000 size=1><B> </B></FONT><FONT face=Verdana
size=1>-]</FONT><B><FONT face=Verdana size=1><BR><BR></FONT></B><FONT
face=Verdana size=1>[<a style="TEXT-DECORATION: none" href="http://silentrage.dk3.com">Skip</a>]</FONT></P>
<P> </P></DIV></BODY></HTML>

Continua >>

Sette · #4 (**permalink**) 11/12/2002, 14:18

donde kontinua?

CORE · #5 (**permalink**) 11/12/2002, 14:18

Preload.js

// scrollbar
var upH = 23; // Height of up-arrow
var upW = 29; // Width of up-arrow
var downH = 23; // Height of down-arrow
var downW = 29; // Width of down-arrow
var dragH = 62; // Height of scrollbar
var dragW = 23; // Width of scrollbar
var scrollH = 148; // Height of scrollbar
var speed = 4; // Scroll speed

// And now... go to the bottom of the page...

// Browser detection
var dom = document.getElementById ? true:false;
var nn4 = document.layers ? true:false;
var ie4 = document.all ? true:false;

var mouseY; // Mouse Y position onclick
var mouseX; // Mouse X position onclick

var clickUp = false; // If click on up-arrow
var clickDown = false; // If click on down-arrow
var clickDrag = false; // If click on scrollbar
var clickAbove = false; // If click above scrollbar
var clickBelow = false; // If click below scrollbar

var timer = setTimeout("",500); // Repeat variable
var upL; // Up-arrow X
var upT; // Up-arrow Y
var downL; // Down-arrow X
var downT; // Down-arrow Y
var dragL; // Scrollbar X
var dragT; // Scrollbar Y
var rulerL; // Ruler X
var rulerT; // Ruler Y
var contentT; // Content layer Y;
var contentH; // Content height
var contentClipH; // Content clip height
var scrollLength; // Number of pixels scrollbar should move
var startY; // Keeps track of offset between mouse and span

// Mousedown
function down(e){
if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton
getMouse(e);
startY = (mouseY - dragT);

// If click on up-arrow
if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){
clickUp = true;
return scrollUp();
}
// Else if click on down-arrow
else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){
clickDown = true;
return scrollDown();
}
// Else if click on scrollbar
else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
clickDrag = true;
return false;
}
else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){
// If click above drag
if(mouseY < dragT){
clickAbove = true;
clickUp = true;
return scrollUp();
}
// Else click below drag
else{
clickBelow = true;
clickDown = true;
return scrollDown();
}
}
// If no scrolling is to take place
else{
return true;
}
}

// Drag function
function move(e){
if(clickDrag && contentH > contentClipH){
getMouse(e);
dragT = (mouseY - startY);

if(dragT < (rulerT))
dragT = rulerT;
if(dragT > (rulerT + scrollH - dragH))
dragT = (rulerT + scrollH - dragH);

contentT = ((dragT - rulerT)*(1/scrollLength));
contentT = eval('-' + contentT);

moveTo();

// So ie-pc doesn't select gifs
if(ie4)
return false;
}
}

function up(){
clearTimeout(timer);
// Resetting variables
clickUp = false;
clickDown = false;
clickDrag = false;
clickAbove = false;
clickBelow = false;
return true;
}

// Reads content layer top
function getT(){
if(ie4)
contentT = document.all.content.style.pixelTop;
else if(nn4)
contentT = document.contentClip.document.content.top;
else if(dom)
contentT = parseInt(document.getElementById("content").style. top);
}

// Reads mouse X and Y coordinates
function getMouse(e){
if(ie4){
mouseY = event.clientY + document.body.scrollTop;
mouseX = event.clientX + document.body.scrollLeft;
}
else if(nn4 || dom){
mouseY = e.pageY;
mouseX = e.pageX;
}
}

// Moves the layer
function moveTo(){
if(ie4){
document.all.content.style.top = contentT;
document.all.ruler.style.top = dragT;
document.all.drag.style.top = dragT;
}
else if(nn4){
document.contentClip.document.content.top = contentT;
document.ruler.top = dragT;
document.drag.top = dragT;
}
else if(dom){
document.getElementById("content").style.top = contentT + "px";
document.getElementById("drag").style.top = dragT + "px";
document.getElementById("ruler").style.top = dragT + "px";
}
}

// Scrolls up
function scrollUp(){
getT();

if(clickAbove){
if(dragT <= (mouseY-(dragH/2)))
return up();
}

if(clickUp){
if(contentT < 0){
dragT = dragT - (speed*scrollLength);

if(dragT < (rulerT))
dragT = rulerT;

contentT = contentT + speed;
if(contentT > 0)
contentT = 0;

moveTo();
timer = setTimeout("scrollUp()",25);
}
}
return false;
}

// Scrolls down
function scrollDown(){
getT();

if(clickBelow){
if(dragT >= (mouseY-(dragH/2)))
return up();
}

if(clickDown){
if(contentT > -(contentH - contentClipH)){
dragT = dragT + (speed*scrollLength);
if(dragT > (rulerT + scrollH - dragH))
dragT = (rulerT + scrollH - dragH);

contentT = contentT - speed;
if(contentT < -(contentH - contentClipH))
contentT = -(contentH - contentClipH);

moveTo();
timer = setTimeout("scrollDown()",25);
}
}
return false;
}

// reloads page to position the layers again
function reloadPage(){
location.reload();
}

// Preload
function eventLoader(){
if(ie4){
// Up-arrow X and Y variables
upL = document.all.up.style.pixelLeft;
upT = document.all.up.style.pixelTop;
// Down-arrow X and Y variables
downL = document.all.down.style.pixelLeft;
downT = document.all.down.style.pixelTop;
// Scrollbar X and Y variables
dragL = document.all.drag.style.pixelLeft;
dragT = document.all.drag.style.pixelTop;
// Ruler Y variable
rulerT = document.all.ruler.style.pixelTop;
// Height of content layer and clip layer
contentH = parseInt(document.all.content.scrollHeight);
contentClipH = parseInt(document.all.contentClip.style.height);
}
else if(nn4){
// Up-arrow X and Y variables
upL = document.up.left;
upT = document.up.top;
// Down-arrow X and Y variables
downL = document.down.left;
downT = document.down.top;
// Scrollbar X and Y variables
dragL = document.drag.left;
dragT = document.drag.top;
// Ruler Y variable
rulerT = document.ruler.top;
// Height of content layer and clip layer
contentH = document.contentClip.document.content.clip.bottom;
contentClipH = document.contentClip.clip.bottom;
}
else if(dom){
// Up-arrow X and Y variables
upL = parseInt(document.getElementById("up").style.left) ;
upT = parseInt(document.getElementById("up").style.top);
// Down-arrow X and Y variables
downL = parseInt(document.getElementById("down").style.lef t);
downT = parseInt(document.getElementById("down").style.top );
// Scrollbar X and Y variables
dragL = parseInt(document.getElementById("drag").style.lef t);
dragT = parseInt(document.getElementById("drag").style.top );
// Ruler Y variable
rulerT = parseInt(document.getElementById("ruler").style.to p);
// Height of content layer and clip layer
contentH = parseInt(document.getElementById("content").offset Height);
contentClipH = parseInt(document.getElementById("contentClip").of fsetHeight);
document.getElementById("content").style.top = 0 + "px";

}
// Number of pixels scrollbar should move
scrollLength = ((scrollH-dragH)/(contentH-contentClipH));
// Initializes event capturing
if(nn4){
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
window.onresize = reloadPage;
}
document.onmousedown = down;
document.onmousemove = move;
document.onmouseup = up;
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}

FIN

Sette · #6 (**permalink**) 11/12/2002, 14:21

y el .js ese, ke hago kon el?

DeLaVega · #7 (**permalink**) 11/12/2002, 14:32

Copia todo ese código (el del js) y grabalo en el archivo preload.js
Si te fijás, en la cuarta línea de la página html hace una llamada a este archivo, es decir lo inserta en la página html.
saludos

Sette · #8 (**permalink**) 11/12/2002, 14:43

ok, pero en definitiva, sino es mucha molestia una última pregunta, yo ke debería poner ahí todas las direcciones de las imágenes de la web y así las karga todas r´apidamente?

RootK · #9 (**permalink**) 11/12/2002, 15:11

wow... gracias Core por el codigo.. por lo visto esta muy pequeño verdad..??

jejeje (ya hasta me lo aprendí )

Lo voy a probar y te aviso...

Gracias y suerte...!!

RootK · #10 (**permalink**) 11/12/2002, 15:23

Ya lo probé.. y lo hace todo sin problemas.. pero en que parte cuando termine de cargar... se va a mostrar mi page...??

, porque me hace el scroll... y la carga con porcentaje.. pero de ahi.. se sigue y se sigue...

Que mas hay que modificar..??

Gracias. . .

CORE · #11 (**permalink**) 11/12/2002, 15:56

Holas

el codigo me funciona bien no hay que modificar nada
pero si quieren algo mas sencillo me acao de encontrar este enlace http://www.dhtmlcentral.com/script/script.asp?id=17

Sette · #12 (**permalink**) 11/12/2002, 15:58

ke va, este es perfecto, gracias por kompartirlo kon todos

Sette · #13 (**permalink**) 11/12/2002, 17:29

CORE una última pregunta.

Yo para kargar las imágenes he de introducirlas una a una, suponiendo ke yo tenga todas las imágenes en una sola karpeta no puedo poner ke me buske las ke hay en esa karpeta automatikamente??????

es decir si mi karpeta de fotos se llamase 1 yo le mandaría buskar en ("1") , me entiendes?, komo podría konfigurar eso?, es posible?

unanime · #14 (**permalink**) 11/12/2002, 22:11

<script language="javascript" src="progressbar.js">

</script>

//!--Segundo paso: CONFIGURA ESTE CODIGO. ESPERO QUE LES SIRVA.

// Progressbar - Version 2.0
// PUT THE NAMES OF ALL YOUR IMAGES THAT NEED TO BE "CACHED" IN THE "imagenames" ARRAY.
// DONT FORGET THE COMMA BETWEEN EACH ENTRY, OR THE TICK MARKS AROUND EACH NAME.
// WHEN ALL THE IMAGES ARE DONE LOADING, THE "imagesdone" VARIABLE IS SET TO "TRUE"

var imagenames=new Array( '01.jpg' , '02.jpg' , '03.jpg');

var yposition=150; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='gray' ; // PROGRESS BAR COLOR
var unloadedcolor='white'; // BGCOLOR OF UNLOADED AREA
var barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=350; // WIDTH OF THE BAR IN PIXELS
var bordercolor='black'; // COLOR OF THE BORDER

//DO NOT EDIT BEYOND THIS POINT
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var imagesdone=false;
var blocksize=barwidth/(imagenames.length);
barheight=Math.max(barheight,25);
var loaded=0, perouter, perdone, images=new Array();
var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="1" face="arial">Cargando imágenes...</font></center></td></tr></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="arial">Cargando imágenes...</font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';
document.write(txt);
function loadimages(){
if(NS4){
perouter=document.perouter;
perdone=document.perouter.document.layers[0].document.perdone;
}
if(NS6){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
}
if(IE4){
perouter=document.all.perouter;
perdone=document.all.perdone;
}
cliplayer(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
setTimeout('checkload('+n+')' ,n*100);
}}
function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
perouter.style.left=x+'px';
perouter.style.top=yposition+'px';
perouter.style.visibility="visible";
}}
function dispbars(){
loaded++;
cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
if(loaded>=imagenames.length)setTimeout('hideperou ter()', 800);
}
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
}
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
window.onload=loadimages;

Sette · #15 (**permalink**) 12/12/2002, 12:59

Pero ese kódigo es para kargar imagen a imagen o por karpetas?

RootK · #16 (**permalink**) 13/12/2002, 17:10

Gracias nuevamente por la info...

Saludos