Descripción: Script para precargar imágenes con porcentaje de carga.
A continuación mostramos los apuntes asociados a este extra:
// Descripción para sindicación:
/*
[rss]Script para precargar imágenes con porcentaje de carga.[/rss]
*/
function precarga_inicio() {
tag("precarga_inicial").disabled = true;
porcentaje = document.createElement("div");
porcentaje.id = "precarga_porcentaje";
porcentaje.style.opacity = "0";
porcentaje.style.top = "0";
porcentaje.style.left = "0";
porcentaje.style.width = "100%";
porcentaje.style.height = "100%";
porcentaje.style.position = "absolute";
porcentaje.style.backgroundColor = "transparent";
porcentaje_valor = document.createElement("div");
porcentaje_valor.id = "precarga_porcentaje_valor";
porcentaje_valor.style.top = "40%";
porcentaje_valor.style.left = "10%";
porcentaje_valor.style.width = "80%";
porcentaje_valor.style.height = "20%";
porcentaje_valor.style.opacity = "0.7";
porcentaje_valor.style.position = "absolute";
porcentaje_valor.style.backgroundColor = "white";
porcentaje_valor.style.border = "2px ridge blue";
porcentaje_valora = document.createElement("div");
porcentaje_valora.id = "precarga_porcentaje_valora";
porcentaje_valora.style.top = "0";
porcentaje_valora.style.left = "0";
porcentaje_valora.style.width = "0";
porcentaje_valora.style.height = "100%";
porcentaje_valora.style.position = "absolute";
porcentaje_valora.style.backgroundColor = "red";
porcentaje_valor.appendChild(porcentaje_valora);
porcentaje.appendChild(porcentaje_valor);
tag("precarga_capas").appendChild(porcentaje);
for (i = 100; i > 0; i--) {
accion = "tag('precarga_porcentaje').style.opacity = '" + (i / 100) + "'";
setTimeout(accion, i * 20);
}
setTimeout(cargar_capas, 2100);
}
var parejas_precarga = [
{"capa": "capa2", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva62.jpg&max=240"},
{"capa": "capa3", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva66.jpg&max=240"},
{"capa": "capa4", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva73.jpg&max=240"},
{"capa": "capa5", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva81.jpg&max=240"},
{"capa": "capa6", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva82.jpg&max=240"},
{"capa": "capa7", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva91.jpg&max=240"},
{"capa": "capa8", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva95.jpg&max=240"},
{"capa": "capa9", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva100.jpg&max=240"}
];
var imagenes_precarga = [];
function cargar_capas() {
_pares_ = [];
for (i = 0, total = parejas_precarga.length; i < total; i++)
_pares_.push(parejas_precarga[i]);
while(_pares_.length > 0) {
pareja = _pares_.pop();
imagen = new Image();
imagen.src = pareja.fondo;
capa = document.createElement("div");
capa.id = pareja.capa;
capa.style.background = "url(" + pareja.fondo + ") no-repeat 0 0";
capa.style.width = "240px";
capa.style.height = "180px";
capa.style.top = "0";
capa.style.left = "0";
capa.style.position = "absolute";
tag("precarga_capas").insertBefore(capa, tag("precarga_capa1"));
imagenes_precarga.push(imagen);
}
precargando();
}
function precarga_fin() {
tag("precarga_final").disabled = true;
tag("efecto_iniciar").disabled = true;
if (_actual_ % 9 != 0)
_efectos_["e_fundido"]("precarga_capa1");
setTimeout(precarga_limpieza, 1000);
}
function precarga_limpieza() {
for (i = 0, total = parejas_precarga.length; i < total; i++)
tag("precarga_capas").removeChild(tag(parejas_precarga[i].capa));
tag("precarga_inicial").disabled = false;
}
function precargando() {
cargadas = 0;
total = imagenes_precarga.length;
for (i = 0; i < total; i++)
cargadas += (imagenes_precarga[i].complete) ? 1 : 0;
porcentaje = 100 / (total / cargadas);
tag("precarga_porcentaje_valora").style.width = porcentaje + "%";
if (porcentaje == 100) {
for (i = 100; i > 0; i--) {
accion = "tag('precarga_porcentaje').style.opacity = '" + (1 - (i / 100)) + "'";
setTimeout(accion, i * 20);
}
setTimeout(activar_controles, 2000);
}
else
setTimeout(precargando, 100);
}
function activar_controles() {
tag("precarga_capas").removeChild(tag("precarga_porcentaje"));
if (_efectos_ == undefined) {
_efectos_ = new objetoTransiciones(1000, 100, 240, 180, _capas_, "precarga_capa1", "precarga_capas");
for(_n_ in _efectos_)
if (_n_.charAt(1) == "_") _nombres_.push(_n_);
}
_actual_ = 9;
tag("efecto_iniciar").disabled = false;
tag("precarga_final").disabled = false;
}
function precarga_onload() {
poner_evento(tag("precarga_inicial"), "click", precarga_inicio);
poner_evento(tag("precarga_final"), "click", precarga_fin);
poner_evento(tag("efecto_iniciar"), "click", activar_presentacion);
poner_evento(tag("efecto_detener"), "click", detener_presentacion);
}
_capas_ = ["precarga_capa1", "capa2", "capa3", "capa4", "capa5", "capa6", "capa7", "capa8", "capa9"];
function efectuar() {
if (_presentar_) {
_efectos_.asignar_tipo_mosaico(Math.floor(Math.random() * 1000));
_efectuar_ = _nombres_[Math.floor(Math.random() * _nombres_.length)];
tag("nombre_efecto").value = _efectuar_;
_efectos_[_efectuar_](_capas_[++_actual_ % _capas_.length]);
setTimeout("efectuar()", 4000);
}
};
var _presentar_ = false;
var _nombres_ = new Array();
var _efectos_;
function detener_presentacion(e) {
_presentar_ = false;
tag("efecto_detener").disabled = true;
tag("efecto_iniciar").disabled = false;
tag("precarga_final").disabled = false;
tag("nombre_efecto").value = "";
}
function activar_presentacion(e) {
_presentar_ = true;
tag("efecto_detener").disabled = false;
tag("efecto_iniciar").disabled = true;
tag("precarga_final").disabled = true;
efectuar();
}
poner_evento(window, "load", precarga_onload);
Este código ha sido leído en 96 ocasiones.
Esta extra aún no tiene comentarios.
Valoración de esta página: (extra.script.precarga_load)
Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024 | Otros enlaces: buscador