Objetos Precarga y JavaScriptImage()
El uso de una gran cantidad de imágenes de alta resolución puede hacer que un sitio web brille, pero también hará que la velocidad de acceso al sitio disminuya: las imágenes son archivos y ocupan ancho de banda, y el ancho de banda está directamente relacionado con el tiempo de espera de acceso. Aprendamos un pequeño truco llamado precarga de imágenes para mejorar la velocidad de acceso a las imágenes.
Algunos navegadores intentan resolver este problema guardando estas imágenes en el caché local. Estas imágenes se pueden llamar secuencialmente, pero ahí. Todavía habrá un retraso cuando las imágenes se utilicen por primera vez. La precarga es una técnica que descarga imágenes al caché antes de que sean necesarias. De esta manera, cuando realmente sea necesario mostrar la imagen, restaurarla rápidamente desde el caché. y mostrarlo inmediatamente
La forma más sencilla de precargar un objeto Image() es usar JavaScript para crear un nuevo objeto Image() y luego agregar la URL de la imagen que desea precargar. Supongamos que tenemos un archivo de imagen llamado heavyimagefile jpg. Queremos que este archivo se muestre cuando el usuario mueva el puntero del mouse sobre una imagen existente. Para precargar este archivo más rápido, simplemente creamos un nuevo objeto Image() llamado heavyImage y. luego cárguelo sincrónicamente en la página a través del controlador de eventos onLoad()
<>
precargador de función()
{
heavyImage = nueva imagen();
heavyImage src = heavyimagefile jpg <; /p>
}
>a>
Tenga en cuenta que la etiqueta de imagen en sí no maneja los eventos onMouseOver() y onMouseOut(). Esta es la razón por la que se usa la etiqueta en el ejemplo anterior. lo que se incluye en la etiqueta es que la etiqueta incluye soporte para estos tipos de eventos
Carga de múltiples imágenes a través de matrices
En situaciones reales, es probable que necesites precargue más de una imagen. Por ejemplo, para una barra de menú que incluye varias imágenes o desea lograr efectos de animación fluidos, no es difícil lograrlo. Solo necesita usar matrices de JavaScript como se muestra en el ejemplo. >
En el ejemplo anterior Definir la variable i y el objeto Imagen () llamado imageObj, luego defina una nueva matriz imágenes []. Cada elemento de la matriz almacenará la dirección fuente de la imagen que debe precargarse. Finalmente, use un bucle for () para recorrer todo. matriz y evaluar cada uno El elemento especifica el objeto Image() para precargar las imágenes en el caché
Página siguiente
Precarga y el objeto Image() de JavaScript
onLoad() Controlador de eventos (manejador de eventos) Como muchos otros objetos en JavaScript, el objeto Image() también tiene muchos controladores de eventos. Sin duda, el más útil de ellos es el controlador onLoad(), que se llama cuando la imagen está completamente cargada. Una vez que la imagen esté completamente cargada, puede llamar a este identificador a través de una función personalizada para completar una función específica. El siguiente ejemplo proporciona el código que utiliza este método para implementar las siguientes acciones. Muestra la pantalla de espera al cargar la imagen. dirige el navegador a una nueva URL una vez que se completa la carga
<>
Por favor espera cargando imágenes
Por supuesto, también puede crear una serie de imágenes y recorrer cada elemento para precargarlo y luego realizar un seguimiento del número de imágenes cargadas en cada etapa una vez que se hayan cargado todas las imágenes. una vez cargado, puede programar el controlador de eventos para llevar el navegador a la siguiente etapa (o completar otras tareas)
Precarga y menús multiestado. Ahora, ¿cómo se aplican todos los conocimientos teóricos que acaba de aprender a una aplicación real? ? Aquí hay un fragmento de código que escribí recientemente.
——Una barra de menú que incluye botones (enlaces de imágenes). Cada botón puede estar en uno de tres estados. Desplazamiento y clic normales del mouse. Dado que los botones tienen múltiples estados, se debe utilizar la carga previa de imágenes para garantizar que el menú responda. cambios de estado El código del Listado A muestra cómo implementar esta funcionalidad
El código HTML del Listado A crea una barra de menú con cuatro botones. Cada botón tiene tres estados al pasar el mouse normalmente. Las condiciones de activación del clic son las siguientes.
Cuando el puntero del mouse se mueve hacia el botón en el estado normal, el botón cambia al estado de desplazamiento del mouse. Después de que el mouse sale del área del botón, el botón vuelve al estado normal.
Cuando el mouse hace clic en el botón, se hace clic en el botón y permanecerá en este estado hasta que se haga clic en otro botón
Si se hace clic en un botón, no se puede hacer clic en ningún otro botón y solo puede estar en el desplazamiento del mouse o estado normal
Solo se puede hacer clic en un botón a la vez
Solo se puede hacer clic en un botón en el estado de desplazamiento del mouse a la vez
El primero La tarea es configurar cada menú de almacenamiento. Los elementos de la matriz de la imagen de estado. Los elementos correspondientes también se crean en el cuerpo del documento HTML y se nombran en orden. desde el principio y los elementos
correspondientes se nombran desde el principio; esto requiere que en la segunda mitad del script se requieran ajustes de cálculo a los valores correspondientes
La función preloadImages() es responsable de cargar todos imágenes en el caché, por lo que quedará poco tiempo de respuesta para el mouse. El bucle for() se utiliza para La primera etapa repite la operación de creación de imágenes y luego precarga cada imagen
La función resetAll() es una forma muy conveniente de restablecer todas las imágenes a su estado normal. Esto es necesario porque cuando se hace clic en el menú Cuando se hace clic en un botón, todos los demás botones del menú deben volver a su estado normal antes de que el botón cambie de estado después de hacer clic.
Las funciones setNormal() setHover() y setClick() son responsables de cambiar la imagen específica (la fuente de imagen del número de imagen (pasada como parámetro de función) se cambia a la fuente de imagen del correspondiente mouseover normal o estado de clic. Dado que la imagen en la que se hizo clic debe permanecer en el estado hasta que se haga clic en otra imagen (consulte la regla #) y, por lo tanto, se haga clic. La imagen no aceptará las funciones de acción del mouse setNormal() y setHover() por el momento. solo completa la acción de cambiar el estado de la imagen sin cambiar el estado de la imagen cuando se hace clic en lishixinzhi/Article/program/Java/JSP/201311/19357