Foros del Web » Creando para Internet » HTML »

Imagen de carga previa

Estas en el tema de Imagen de carga previa en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/12/2002, 13:31
Avatar de RootK
Moderador
 
Fecha de Ingreso: febrero-2002
Ubicación: México D.F
Mensajes: 8.004
Antigüedad: 22 años, 1 mes
Puntos: 50
Imagen de carga previa

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
__________________
Nadie roba nada ya que en la vida todo se paga . . .

Exentrit - Soluciones SharePoint & Net
  #2 (permalink)  
Antiguo 11/12/2002, 13:33
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.747
Antigüedad: 22 años, 1 mes
Puntos: 3
Yo no sé komo se hace, pero tb me interesa. no es mala idea poner eso en la web para mientras karga
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #3 (permalink)  
Antiguo 11/12/2002, 14:15
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 21 años, 11 meses
Puntos: 3
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>&nbsp;<P>
<SCRIPT language=JavaScript1.2>
<!-- beging hiding
document.write('<table border="1" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="#FFFFFF"' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
document.write('<td bordercolorlight="#000000" bordercolordark="#000000" width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('</tr></table>');
document.write('<p>')
loadImages();
// end hiding -->
</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>&nbsp;</P></DIV></BODY></HTML>


Continua >>
  #4 (permalink)  
Antiguo 11/12/2002, 14:18
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.747
Antigüedad: 22 años, 1 mes
Puntos: 3
donde kontinua?
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #5 (permalink)  
Antiguo 11/12/2002, 14:18
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 21 años, 11 meses
Puntos: 3



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
  #6 (permalink)  
Antiguo 11/12/2002, 14:21
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.747
Antigüedad: 22 años, 1 mes
Puntos: 3
y el .js ese, ke hago kon el?
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #7 (permalink)  
Antiguo 11/12/2002, 14:32
 
Fecha de Ingreso: julio-2002
Mensajes: 447
Antigüedad: 21 años, 8 meses
Puntos: 0
De acuerdo Grabalo como archivo

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
  #8 (permalink)  
Antiguo 11/12/2002, 14:43
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.747
Antigüedad: 22 años, 1 mes
Puntos: 3
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?
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #9 (permalink)  
Antiguo 11/12/2002, 15:11
Avatar de RootK
Moderador
 
Fecha de Ingreso: febrero-2002
Ubicación: México D.F
Mensajes: 8.004
Antigüedad: 22 años, 1 mes
Puntos: 50
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...!!
  #10 (permalink)  
Antiguo 11/12/2002, 15:23
Avatar de RootK
Moderador
 
Fecha de Ingreso: febrero-2002
Ubicación: México D.F
Mensajes: 8.004
Antigüedad: 22 años, 1 mes
Puntos: 50
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. . .
  #11 (permalink)  
Antiguo 11/12/2002, 15:56
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 21 años, 11 meses
Puntos: 3
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
  #12 (permalink)  
Antiguo 11/12/2002, 15:58
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.747
Antigüedad: 22 años, 1 mes
Puntos: 3
ke va, este es perfecto, gracias por kompartirlo kon todos
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #13 (permalink)  
Antiguo 11/12/2002, 17:29
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.747
Antigüedad: 22 años, 1 mes
Puntos: 3
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?
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #14 (permalink)  
Antiguo 11/12/2002, 22:11
Avatar de unanime  
Fecha de Ingreso: diciembre-2002
Mensajes: 46
Antigüedad: 21 años, 3 meses
Puntos: 0
Mensaje Proba con esto

<!-- PRIMER PASO: Copiar dentro del tag HEAD -->

<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;
  #15 (permalink)  
Antiguo 12/12/2002, 12:59
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.747
Antigüedad: 22 años, 1 mes
Puntos: 3
Pero ese kódigo es para kargar imagen a imagen o por karpetas?
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #16 (permalink)  
Antiguo 13/12/2002, 17:10
Avatar de RootK
Moderador
 
Fecha de Ingreso: febrero-2002
Ubicación: México D.F
Mensajes: 8.004
Antigüedad: 22 años, 1 mes
Puntos: 50
Gracias nuevamente por la info...

Saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:41.