logoExtra: script.precarga_load

Descripción: Script para precargar imágenes con porcentaje de carga.


A continuación mostramos los apuntes asociados a este extra:

Precarga de imágenes
Hasta el momento no hemos mencionado el tema de las precargas, pero con la serie de apuntes sobre transiciones, decidimos implementarla, y de paso hablar de ellas.
// 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 45 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.precarga_load) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018 | Otros enlaces: buscador