Tengo un fondo de imagen cuyo contenido quiero que esté siempre visible, sin importar cuál sea la resolución del usuario. Por lo tanto, quiero ser capaz de determinar cuál es la resolución y establecer el archivo de imagen de fondo apropiado antes de cargar la página, desde el principio. ¿Es posible de alguna manera?Ejecutar la función de JavaScript antes de la carga de la página (configuración de fondo del tamaño apropiado)
El primer punto en el que puede ejecutar una función de Javascript con acceso al DOM (sin esperar carga de página) es colocar una etiqueta <script> justo después de la etiqueta de apertura <body>.
Los scripts dentro del <head> se ejecutarán antes de que esto ocurra, pero no habrá acceso a los elementos en la página.
probar este código
<body>
<script type="text/javascript">
alert("Some elements shouldn't even be visible when this shows");
</script>
... rest of the page
</body>
Ver este example con un poco de gangsters Lipsum texto.
¿De verdad? Entonces, ¿cuándo se ejecutan las secuencias de comandos en la cabeza? – some
@some: Buena pregunta. Se ejecuta ANTES de la etiqueta '
', pero no hay acceso a los elementos en la página. Debería aclarar eso. – MarkoSolo tiene acceso a los elementos que se han declarado antes de la secuencia de comandos porque el resto de la página aún no se ha analizado. Esa es la razón por la cual las personas esperan que el DOM se cargue antes de que comiencen a tocarlo. Un marco decente hace que sea muy fácil asociar una función al evento cargado DOM en un navegador cruzado. – some
Utilizando un marco de JavaScript como MooTools puede utilizar el evento DomReady en lugar de onLoad (que espera a que se carguen todos los elementos de imagen) puede desencadenar un evento cuando la página se haya cargado.
Alternativamente con CSS puede colocar la parte superior izquierda absoluta y el ancho: 100% para ganar el día. : O
Prefiero no usar código externo si puedo hacerlo fácilmente sin él :). En cuanto a la segunda parte de su respuesta, no quiero que cambie el tamaño de la ventana, sino que se ajuste al ancho de la pantalla. Pero gracias de cualquier manera :). – kremuwa
Me doy cuenta de que específicamente preguntas sobre JavaScript, pero hay una bonita decent technique for doing this with CSS (y opcionalmente un poco de JavaScript) descrita en el sitio de CSS Tricks.
No quiero que cambie el tamaño de la ventana, sino que se ajuste al ancho de la pantalla. Gracias de todos modos :) – kremuwa
La técnica que he vinculado utiliza CSS para escalar la imagen para que se ajuste a la ventana del navegador. No cambia el tamaño de la ventana. – stevelove
Sé - "No quiero que cambie el tamaño de la ventana" - significa: "No quiero escalar el fondo cuando la ventana (y la ventana del navegador) cambia su tamaño". Quiero ajustarlo solo al ancho de la pantalla. – kremuwa
Comprobar este artículo en conseguir una resolución de pantalla en Javascript: http://andylangton.co.uk/articles/javascript/browser-screen-resolution/
etiquetas de script se ejecutan en línea si usted no hace nada especial para aplazar ellos (y el aplazamiento de la ejecución del script no es compatible con todos los navegadores). Esto significa que una etiqueta de script anidada dentro de la etiqueta del cuerpo se ejecutará antes de que cargue el resto del cuerpo. Puede hacer que su secuencia de comandos detecte la resolución de pantalla y establecer la imagen de fondo para el cuerpo allí mismo.
Sé cómo obtener la resolución de la pantalla, gracias :). Me encantaría aceptar sus dos respuestas, pero como no es posible y la respuesta de @Marko es más compleja, tengo que tomar una decisión. Pero gracias de nuevo y tengo un punto para una respuesta útil. – kremuwa
no hay problema. Gracias :) – Gopherkhan
+1 para la idea y hacer la pregunta. –
¿Qué sucede si el usuario cambia el tamaño de su ventana? – some
Nada. El fondo debe ajustarse a la resolución de la pantalla, no al tamaño actual de la ventana. – kremuwa