"loading" con javascript
Hola!! Estoy desarrollando una pagina web con bastantes graficos y me gustaria saber como poner una barrita del tipo "cargando" o del tanto por cien cargado, antes de que se vea nada de la página, más o menos como se hace en flash pero solo con javascript
Respuesta de mosca79
1
Si queres te puedo mandar el codigo en javascript, ¿te interesa?
Nos vemos
Nos vemos
Hola!!
Gracias por tu respuesta y sí me interesaría muchisimo si me pudieras mandar el codigo,
por favor pegamelo en la respuesta a esta pregunta, muchas gracias y un saludo!! :)))
Gracias por tu respuesta y sí me interesaría muchisimo si me pudieras mandar el codigo,
por favor pegamelo en la respuesta a esta pregunta, muchas gracias y un saludo!! :)))
En el head pones esto
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
//-->
</script>
Y donde queres que aparezca la barra de carga lo siguiente
<script language="JavaScript1.1">var locationAfterPreload = "presentacion.html" // URL of the page after preload finishes
var lengthOfPreloadBar = 200 // Length of preload bar (in pixels)
var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
// Put the URLs of images that you want to preload below (as many as you want)
var yourImages = new Array("graficos/animacion/images/01.jpg","graficos/animacion/marco_txt.jpg","graficos/animacion/sac_over.jpg","graficos/animacion/surti_over.jpg","graficos/animacion/taller_over.jpg","graficos/animacion/tubos_over.jpg")
// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "graficos/animacion/barra_fondo.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
dots[1] = new Image(1,1)
dots[1].src = "graficos/animacion/barra_carga.gif" // color of bar as preloading progresses (same note as above)
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages = new Image()
preImages.src = yourImages
}
for (i = 0; i < preImages.length; i++) {
loaded = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded == false && preImages.complete) {
loaded = true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++ }
}
timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>
Fijate que podes seleccionar el mensaje de la barra y los colores
Nos vemos, si queres ver como funciona entra en www.petrotandil.com.ar/intro.html
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
//-->
</script>
Y donde queres que aparezca la barra de carga lo siguiente
<script language="JavaScript1.1">var locationAfterPreload = "presentacion.html" // URL of the page after preload finishes
var lengthOfPreloadBar = 200 // Length of preload bar (in pixels)
var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
// Put the URLs of images that you want to preload below (as many as you want)
var yourImages = new Array("graficos/animacion/images/01.jpg","graficos/animacion/marco_txt.jpg","graficos/animacion/sac_over.jpg","graficos/animacion/surti_over.jpg","graficos/animacion/taller_over.jpg","graficos/animacion/tubos_over.jpg")
// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "graficos/animacion/barra_fondo.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
dots[1] = new Image(1,1)
dots[1].src = "graficos/animacion/barra_carga.gif" // color of bar as preloading progresses (same note as above)
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages = new Image()
preImages.src = yourImages
}
for (i = 0; i < preImages.length; i++) {
loaded = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded == false && preImages.complete) {
loaded = true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++ }
}
timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>
Fijate que podes seleccionar el mensaje de la barra y los colores
Nos vemos, si queres ver como funciona entra en www.petrotandil.com.ar/intro.html
