0

Intento cambiar la imagen del fondo del <body> onLoad. Mi código es el siguiente:

document.body.addEventListener('load', function () {
    document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
});
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM y Eventos</title>
</head>
<body>
    <button id="miBoton">Haz clic aquí</button>
    <div id="miDiv"></div>
</body>
</html>

¿Est a algo mal?, y si es así, ¿por qué el evento no funciona?

0

2 respuestas 2

2

Porque realmente body no cuenta con un evento load, este evento pertenece a un conjunto denominado Window-reflecting body element event handler set, que vendría siendo «Eventos del body que se reflejan en window», lo que quiere decir que realmente es el objeto window el que cuenta con este evento y por esto que addEventListener no funciona

Entonces esto funciona:

window.addEventListener('load', function () {
  document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
});

Cuando el evento es seteado como atributo esta reflección se hace automaticamente.

Entonces estos códigos tambien funcionan:

document.body.onload = function () {
    document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
});

o directamente en el HTML

<body onload="init()">

Por otro lado, otra forma (creo que incluso mejor) es usar DOMContentLoaded

  document.addEventListener("DOMContentLoaded", (event) => {
    document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
  });

Los eventos que se trasladan al window son:

  • blur
  • error
  • focus
  • load
  • resize
  • scroll
  • scrollend
1
  • Muchas gracias por el aporte, fue una explicación clara y precisa.
    – IvanS
    Commented el 12 sept. 2023 a las 4:06
0

Lo que entiendo es que quieres que al hacer click cambie el fondo, si es eso con este código funciona.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM y Eventos</title>
</head>
<body>
    <button id="miBoton">Haz clic aquí</button>
    <div id="miDiv"></div>

    <script>
    const btn = document.getElementById('miBoton');
    btn.addEventListener('click', function () {
        document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
    })        
    </script>

</body>
</html>

Si lo quieres es con el evento load, tu imagen no carga debido a que según la documentación

El evento load se dispara cuando toda la página se ha cargado, incluyendo todos los recursos dependientes como hojas de estilo e imágenes. Esto contrasta con DOMContentLoaded, que se dispara en cuanto se ha cargado el DOM de la página, sin esperar a que los recursos terminen de cargarse.

Lo que puedes hacer es esto:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM y Eventos</title>
</head>
<body>
    <button id="miBoton">Haz clic aquí</button>
    <div id="miDiv"></div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
    })        
    </script>

</body>
</html>

Espero haberte ayudado. Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.