El Atributo ONLOADSTART

Es un evento HTML que se dispara cuando el navegador comienza a cargar un recurso.

El atributo onloadstart es un evento HTML que se dispara cuando el navegador comienza a cargar un recurso (imagen, video, iframe, etc.). Es útil para mostrar indicadores de carga o inicializar acciones al inicio de una carga.

Sintaxis Básica

<elemento 
    onloadstart="funcionEjecutar()" 
    ...
>

  • elemento: Cualquier elemento HTML que cargue recursos (<img>, <video>, <iframe>).

  • funcionEjecutar(): Función JavaScript que se ejecutará al iniciar la carga.

Ejemplo con Imagen

Objetivo: Mostrar un mensaje mientras la imagen se carga.

<img 
    src="imagen-grande.jpg" 
    onloadstart="mostrarCarga('imagen')" 
    onload="ocultarCarga('imagen')"
>
<div id="mensajeCargaImagen"></div>

<script>
    function mostrarCarga(tipo) {
        document.getElementById(`mensajeCarga${tipo}`).textContent = `Cargando ${tipo}... ⌛`;
    }
    function ocultarCarga(tipo) {
        document.getElementById(`mensajeCarga${tipo}`).textContent = "";
    }
</script>

Resultado: Muestra "Cargando imagen... ⌛" al inicio y lo oculta cuando termina.

Ejemplo con Video

Objetivo: Activar un spinner durante la carga del video.

<video 
    controls 
    onloadstart="mostrarSpinner()" 
    oncanplaythrough="ocultarSpinner()"
>
    <source src="video.mp4" type="video/mp4">
</video>
<div id="spinner">⏳ Cargando video...</div>

<script>
    function mostrarSpinner() {
        document.getElementById("spinner").style.display = "block";
    }
    function ocultarSpinner() {
        document.getElementById("spinner").style.display = "none";
    }
</script>

Nota: oncanplaythrough se dispara cuando el video está listo para reproducirse.

Buenas Prácticas

  • Combina eventos: Usa onloadstart con onload (éxito) y onerror (fallo) para manejar diferentes estados.

  • Optimiza experiencia de usuario: Muestra indicadores de carga para recursos pesados.

  • Accesibilidad: Añade mensajes de texto para usuarios con lectores de pantalla.

Compatibilidad

Navegadores modernos: Chrome, Firefox, Safari, Edge (versiones actualizadas).

Alternativas: Para soporte antiguo, usa addEventListener:

document.getElementById("miVideo").addEventListener("loadstart", function() {
    // Acciones aquí
});

Conclusión

El atributo onloadstart es una herramienta valiosa para mejorar la interacción usuario-recurso al proporcionar retroalimentación inmediata durante cargas. ¡Experimenta combinándolo con otros eventos para crear interfaces más dinámicas!

Ejemplo Final

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tutorial: Uso del atributo "onloadstart" en HTML</title>
    <style>
        .cargando {
            color: blue;
            font-weight: bold;
        }
        #mensajeCarga {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Cómo usar el atributo <code>onloadstart</code> en HTML</h1>
    
    <!-- Paso 3: Ejemplo con una imagen -->
    <h2>Ejemplo 1: Imagen</h2>
    <img 
        src="https://ejemplo.com/imagen-grande.jpg" 
        alt="Imagen de ejemplo" 
        onloadstart="mostrarCarga('imagen')"
        onload="ocultarCarga('imagen')"
    >
    <div id="mensajeCargaImagen" class="cargando"></div>

    <!-- Paso 4: Ejemplo con un video -->
    <h2>Ejemplo 2: Video</h2>
    <video 
        controls 
        onloadstart="mostrarCarga('video')"
        onloadeddata="ocultarCarga('video')"
    >
        <source src="https://ejemplo.com/video.mp4" type="video/mp4">
    </video>
    <div id="mensajeCargaVideo" class="cargando"></div>

    <script>
        // Funciones para manejar eventos
        function mostrarCarga(tipo) {
            document.getElementById(`mensajeCarga${tipo.charAt(0).toUpperCase() + tipo.slice(1)}`).innerHTML = 
                `Cargando ${tipo}... ⌛`;
            document.getElementById(`mensajeCarga${tipo.charAt(0).toUpperCase() + tipo.slice(1)}`).style.display = 'block';
        }

        function ocultarCarga(tipo) {
            document.getElementById(`mensajeCarga${tipo.charAt(0).toUpperCase() + tipo.slice(1)}`).style.display = 'none';
        }
    </script>

</body>
</html>