Las imágenes de precarga es una excelente manera de mejorar su experiencia de usuario. Las imágenes se precargan en el navegador, y los visitantes pueden navegar en su sitio web sin problemas y disfrutar de velocidades de carga extremadamente rápidas. Esto es muy beneficioso para las galerías y sitios web de imágenes donde las imágenes representan una gran proporción. Asegura que las imágenes se publiquen rápida y sin problemas, y también puede ayudar a los usuarios a obtener una mejor experiencia de usuario al navegar por el contenido de su sitio web. Este artículo compartirá tres tecnologías de precarga diferentes para mejorar el rendimiento y la usabilidad del sitio web.
Método 1: Use CSS y JavaScript para implementar precarga
Hay muchas formas de implementar imágenes de precarga, incluido el uso de CSS, JavaScript y varias combinaciones de los dos. Estas tecnologías pueden diseñar soluciones correspondientes de acuerdo con diferentes escenarios de diseño, que son muy eficientes.
El uso de CSS solo puede precargar de manera fácil y eficiente, y el código es el siguiente:
La copia del código es la siguiente:
#preload-01 {fondo: url (http: //domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 {fondo: url (http: //domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 {fondo: url (http: //domain.tld/image-03.png) no-repeat -9999px -9999px; }
Al aplicar estos tres selectores de ID al elemento (x) HTML, podemos precargar la imagen en el fondo fuera de la pantalla a través de la propiedad de fondo de CSS. Mientras las rutas de estas imágenes sigan siendo las mismas, el navegador usa imágenes precargadas (caché) durante la representación cuando se les llama a otra parte de la página web. Simple, eficiente y no requiere JavaScript.
Aunque este método es eficiente, hay margen de mejora. Las imágenes cargadas utilizando este método se cargan junto con otros contenidos de la página, aumentando el tiempo de carga general de la página. Para resolver este problema, agregamos algún código JavaScript para retrasar el tiempo de precarga hasta que se cargue la página. El código es el siguiente:
La copia del código es la siguiente:
// Mejor imagen de imagen previa @ <a href = "http://perishablePress.com/press/2009/12/28/3-ways-peload-images-css-javascript-ajax/"> http://perishablePress.com/press/2009/12/28/3-ways-preload-images-csssssssscript-ajcript-ajax/ preloader () {
if (document.getElementById) {
document.getElementById ("preload-01"). style.background = "url (http: //domain.tld/image-01.png) no-repeat -9999px -9999px";
document.getElementById ("preload-02"). style.background = "url (http: //domain.tld/image-02.png) no-repeat -9999px -9999px";
document.getElementById ("preload-03"). style.background = "url (http: //domain.tld/image-03.png) no-repeat -9999px -9999px";
}
}
función addloadevent (func) {
var OldonLoad = Window.Onload;
if (typeof window.onload! = 'function') {
Window.Onload = func;
} demás {
window.onload = function () {
if (oldonload) {
oldonload ();
}
func ();
}
}
}
AddLoadeVent (Preloader);
En la primera parte del script, tomamos el elemento utilizando el selector de clases y establecemos la propiedad de fondo para que se precara con diferentes imágenes.
En la segunda parte de este script, usamos la función addloadevent () para retrasar el tiempo de carga de la función preloader () hasta que se cargue la página.
¿Qué sucede si JavaScript no funciona correctamente en el navegador del usuario? Es muy simple. La imagen no será precargada. Cuando la página llama a la imagen, se mostrará normalmente.
Método 2: solo use JavaScript para implementar la precarga
El método anterior a veces es muy eficiente, pero gradualmente encontramos que lleva demasiado tiempo en la implementación real. En cambio, prefiero usar JavaScript puro para precargar las imágenes. A continuación se proporcionan dos métodos de precarga, que pueden funcionar maravillosamente en todos los navegadores modernos.
Segmento de código JavaScript 1
Es fácil de implementar simplemente editando y cargando la ruta y el nombre de la imagen requerida:
La copia del código es la siguiente:
<div>
<script type = "text/javaScript">
<
function preload () {
para (i = 0; i <preload.arguments.length; i ++) {
Imágenes [i] = nueva imagen ()
imágenes [i] .src = preload.arguments [i]
}
}
precarga (
"http: //domain.tld/gallery/image-001.jpg",
"http: //domain.tld/gallery/image-002.jpg",
"http: //domain.tld/gallery/image-003.jpg"
)
//-> <!]]> </script>
</div>
Este método es especialmente adecuado para precargar grandes cantidades de imágenes. El sitio web de mi galería utiliza esta tecnología y tiene más de 50 imágenes precargadas. Aplique el script a la página de inicio de sesión y mientras el usuario ingrese a la cuenta de inicio de sesión, la mayoría de las imágenes de la galería se precargarán.
JavaScript Fnippet 2
Este método es similar al método anterior, y también puede precargar cualquier cantidad de imágenes. Agregue el siguiente script a cualquier página web y edítelo de acuerdo con las instrucciones del programa.
La copia del código es la siguiente:
<div>
<script type = "text/javaScript">
<!-//-> <! [Cdata [///> <!-if (document.images) {
img1 = nueva imagen ();
img2 = nueva imagen ();
img3 = nueva imagen ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
}
//-> <!]]> </script>
</div>
Como se puede ver, cada carga de imagen requiere crear una variable, como "img1 = nueva imagen ();" y la declaración de la dirección de la fuente de la imagen, como "img3.src =
"../path/to/image-003.gif"; ". Consulte este modo, puede cargar tantas imágenes como desee.
Hemos mejorado este método nuevamente. Encapsula el script en una función y use addloadevent () para retrasar el tiempo de precarga hasta que la página esté cargada.
La copia del código es la siguiente:
función preloader () {
if (document.Images) {
var img1 = nueva imagen ();
var img2 = nueva imagen ();
var img3 = nueva imagen ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
}
}
función addloadevent (func) {
var OldonLoad = Window.Onload;
if (typeof window.onload! = 'function') {
Window.Onload = func;
} demás {
window.onload = function () {
if (oldonload) {
oldonload ();
}
func ();
}
}
}
AddLoadeVent (Preloader);
Método 3: use AJAX para implementar la precarga
El método dado anteriormente parece no lo suficientemente genial, así que ahora veamos un método que usa AJAX para implementar la precarga de imágenes. Este método utiliza DOM, no solo las imágenes de precarga, sino también precargas CSS, JavaScript y otras cosas relacionadas. Usar AJAX es mejor que usar JavaScript directamente, la ventaja es que la carga de JavaScript y CSS no afectará la página actual. Este método es simple y eficiente.
La copia del código es la siguiente:
window.onload = function () {
setTimeOut (function () {
// xhr para solicitar un JS y un CSS var xhr = new xmlhttprequest ();
xhr.open ('get', 'http: //domain.tld/preload.js');
xhr.send ('');
xhr = nuevo xmlhttprequest ();
xhr.open ('get', 'http: //domain.tld/preload.css');
xhr.send ('');
// Preload Image nueva imagen (). src = "http: //domain.tld/preload.png";
}, 1000);
};
El código anterior está precargado con "preload.js", "preload.css" y "preload.png". El tiempo de espera de 1000 milisegundos es para evitar que el script cuelgue, lo que causa problemas funcionales en la página normal.
A continuación, veamos cómo implementar el proceso de carga utilizando JavaScript:
La copia del código es la siguiente:
window.onload = function () {
setTimeOut (function () {
// referencia a <fead>
var head = document.getElementsByTagName ('Head') [0];
// un nuevo CSS
var css = document.createElement ('enlace');
css.type = "text/css";
css.rel = "Stylesheet";
css.href = "http: //domain.tld/preload.css";
// un nuevo JS
var js = document.createElement ("script");
js.type = "text/javaScript";
js.src = "http: //domain.tld/preload.js";
// precarga JS y CSS Head.appendChild (CSS);
head.appendChild (JS);
// Imagen de precarga
nueva imagen (). src = "http: //domain.tld/preload.png";
}, 1000);
};
Aquí, creamos tres elementos a través de DOM para implementar la precarga de tres archivos. Como se mencionó anteriormente, con AJAX, el archivo de carga no se aplica a la página de carga. Desde este punto de vista, el método AJAX es superior a JavaScript.
De acuerdo, este artículo se introducirá aquí. Todos ya han entendido los tres métodos para implementar la tecnología de precarga de imagen. ¿Cuál es más eficiente? Creo que los amigos también lo han visto, así que aplíquelo a sus propios proyectos.