jquery de desplazamiento infinito. Desplazamiento infinito versus paginación. Cómo hacer carga diferida
Si alguna vez inició sesión en Twitter o buscó una imagen en Google, probablemente haya visto el desplazamiento infinito en acción. Podrías pasar horas desplazándote por una página sin un final a la vista.
EN últimos años Los especialistas en marketing han estado experimentando activamente con varios tipos contenido. Sin embargo, ahora la cuestión de cuál es la mejor manera de mostrar la información en la pantalla para que el usuario se sienta lo más cómodo posible está cada vez más en primer plano. Y el desplazamiento infinito es una de las soluciones más populares hoy en día.
¿Quiere comprender cómo el desplazamiento infinito afecta al SEO y si vale la pena usarlo en su sitio? Primero debes decidir qué es esta herramienta.
Ventajas y desventajas del desplazamiento infinito
Un mismo enfoque de trabajo puede llevar a una empresa al éxito y a otra al fracaso. Desplazamiento infinito, sin duda, es uno de los más maneras prometedoras presentar material a los lectores. Sin embargo, esto no significa que debas cambiar inmediatamente al desplazamiento infinito: primero debes considerar todos los pros y los contras.
Los beneficios del desplazamiento infinito
1. Es conveniente para usuarios móviles
Cuando utilice su teléfono con pantalla táctil Es mucho más fácil desplazarse por la página que hacer clic en enlaces pequeños.
2. Ayuda a mantener la atención del lector.
3. Hace que sea más conveniente mostrar grandes cantidades de información en la pantalla.
¿Quiere publicar un artículo de tamaño impresionante en su sitio web, pero no quiere dividirlo en varias partes? El desplazamiento sin fin te ayudará a salir de esta situación.
4. Es ideal para sitios que actualizan información en tiempo real
El desplazamiento infinito es solución óptima para recursos que proporcionen datos en tiempo real. Esta es otra razón por la que a las redes sociales les gusta esta herramienta.
5. El desplazamiento infinito no causa ningún inconveniente a los usuarios relacionado con la velocidad de carga.
Recursos sobre los que se implementa el sistema. desplazamiento sin fin, en promedio, cada desplazamiento ofrece al usuario 7 mensajes nuevos, lo que no es muy diferente de los sitios con otros tipos de navegación.
Desventajas del desplazamiento infinito
1. Hace que sea difícil encontrar la información que necesita.
Si el lector necesita llegar a elemento específico contenido en un sitio con desplazamiento interminable, se verá obligado a gastar cierto tiempo para desplazarse por la página. Es por eso que Google no ofrece a los usuarios desplazamiento infinito para ver los resultados de búsqueda.
2. No te permite usar un pie de página
El pie de página es un lugar donde puede colocar un enlace al historial de la empresa o, por ejemplo, a información de contacto. Mucha gente está acostumbrada a buscar esta información al final de la página. Si utiliza el desplazamiento infinito, tendrá que buscar un lugar diferente para colocar su información de ayuda.
3. No permite al usuario omitir contenido no interesante con un solo clic.
Un visitante de un sitio con desplazamiento interminable que encuentre contenido que no le resulte muy interesante se verá obligado a desplazarse manualmente.
4. El desplazamiento infinito aumenta la carga en los servidores
Al introducir el desplazamiento infinito, se utiliza activamente JavaScript, por lo que los requisitos de rendimiento del servidor aumentan constantemente.
¿Cómo saber si su sitio necesita desplazamiento infinito?
Los pros y los contras del desplazamiento infinito enumerados anteriormente le brindan idea general sobre esta herramienta. Si aún no estás seguro de utilizarlo, responde dos preguntas:
1. ¿Su empresa requiere que los usuarios busquen productos o servicios en el sitio?
Si es así, optar por el desplazamiento infinito podría tener consecuencias extremadamente negativas para ti.
Empresas que operan en el campo. comercio electrónico, por ejemplo, no pueden saber qué necesitará su próximo cliente o qué información deben proporcionarle. Si esperas que el usuario llegue a la sección que busca, tu tarea se reduce a hacerle el camino lo más fácil posible. Y el desplazamiento interminable en este caso puede crear problemas para el cliente.
Tomemos como ejemplo a Etsy: sitio grande para el comercio en línea. La empresa intentó utilizar el desplazamiento infinito en su sitio web, pero no pudo obtener ningún beneficio. El ingeniero jefe de Etsy, Dan McKinley, no puede dar una explicación clara este hecho. Esto es lo que dice sobre el desplazamiento infinito:
“La gente es extremadamente sensible a cualquier cambio en la interfaz. Pero si el algoritmo de búsqueda arroja los 16 resultados más relevantes en parte superior lista, el desplazamiento infinito permite al usuario, sin gastar esfuerzos adicionales, obtener un número “infinito” de resultados menos relevantes (que, en ausencia de un sistema de desplazamiento infinito, tendría que hacer clic en el botón correspondiente).
No quiero decir que el desplazamiento interminable sea estúpido. esta herramienta Puede aportar muchos beneficios, pero antes de decidir utilizarlo, intente determinar cómo reaccionarán los usuarios ante la innovación”.
Si realmente quiere utilizar el desplazamiento infinito en su sitio, tiene sentido realizar pruebas divididas. Esto le permitirá comprender cuánto les gusta a sus clientes este tipo de navegación.
2. ¿Su sitio ofrece principalmente contenido?
Si es así, probablemente lo que necesitas sea desplazamiento infinito.
Todo el contenido de los sitios diseñados para entretener a los visitantes tiene la misma utilidad para aquellos. A los propietarios de este tipo de sitios no les importa en qué página termine una persona. Lo principal es que el contenido que encuentre allí sea capaz de llamar su atención.
Como ejemplo claro Puede citar el sitio de noticias Inc. Como puede ver, una parte importante de la página está ocupada por . Al mismo tiempo, la información se organiza de tal manera que el proceso de percepción sea lo más sencillo posible.
Recursos como Inc. o Mashable, a menudo no tienen pie de página, lo que reemplaza con bastante éxito el botón de menú en la parte superior de la página. El usuario tiene así una opción: puede pasar instantáneamente a elemento específico sitio web, o simplemente desplácese por el feed en busca de materiales interesantes.
¿Cómo afecta el uso del desplazamiento infinito al SEO?
Si vas a implementar el desplazamiento infinito, deberías descubrir cómo “tratan” esta idea. motores de búsqueda. Esto es lo que Scott Langdon de HigherVisibility tiene que decir al respecto:
"Al escanear un sitio web con un sistema de desplazamiento infinito robots de google"Verá" sólo la parte de la información que el usuario ve antes del primer desplazamiento. El contenido restante no se indexará y, en consecuencia, no podrá aparecer en la página de resultados de búsqueda para una solicitud en particular”.
Sin embargo, este problema se puede solucionar. Los consejos de John Muller, representante de Google, le ayudarán a conseguirlo:
El siguiente diagrama muestra cómo y cómo no paginar (en el segundo caso, algunos de los elementos de contenido se indexarán dos veces).
¿Has estudiado alguna vez cómo la gente consume contenido web? Ven cientos de páginas al día. Lea sobre la marcha, concentrándose en imágenes y texto resaltados en negrita. Además, escanean la página más de lo que la leen.
Por eso el desplazamiento infinito se ha vuelto tan popular; Ahorra tiempo al leer las páginas del sitio web. Impulsadas por el miedo constante a perderse algo, las personas prefieren recibir todo el contenido sobre la marcha en una sola página.
En este artículo, profundizaremos en un método específico de consumo de contenido, el desplazamiento infinito, y veremos algunos ejemplos interesantes.
¿Qué es el desplazamiento infinito?El desplazamiento infinito es una técnica que te permite cargar nuevo contenido en la página a medida que se desplaza por ella. Dependiendo del escenario, el contenido se puede descargar inmediatamente o dividir en subsecciones que aparecen a pedido con solo hacer clic en un botón.
Supuestamente, el desplazamiento infinito se desarrolló como una alternativa más rápida y fácil de usar a la paginación. ¿Pero es esto cierto?
De hecho, todo depende de la situación. No hay razón para cargar cien páginas de contenido a la vez para una navegación fluida; Lo más probable es que muchas personas simplemente lo dejen a la mitad. Por lo tanto, parece que vale la pena separar los casos de uso en aquellos que son buenos para el desplazamiento infinito y aquellos que necesitan una alternativa.
La razón principal para utilizar el desplazamiento infinito en una página es el contenido extenso que necesita captar la atención de los visitantes. Todo parece sencillo, pero el contenido debe ser amplio y tener una jerarquía plana. De lo contrario, es necesario considerar alternativas.
Para redes socialesEN redes sociales y blogs, todas las entradas son relativamente iguales. Bueno, algunos de ellos pueden ser más o menos interesantes, pero es demasiado subjetivo dividirlos en subcategorías. Plataformas como Facebook o Twitter se actualizan en tiempo real y salen historia anterior mensajes. Esto los hace verdaderamente sin fondo.
Para contenido igualmente importanteDigamos que hay un sitio web (una galería de arte interactiva) cuyo propósito es inspirar al espectador de las imágenes que en él se presentan. En tal situación, por regla general, la gente no busca algo específico. Más bien, se desplazarán una y otra vez hasta encontrar algo que les llame la atención. Aquí, lo máximo que puedes hacer es dejar que ordenen los resultados según la actualidad o la popularidad.
Para interfaces móvilesLos teléfonos inteligentes y las tabletas han hecho que el desplazamiento infinito sea una experiencia intuitiva para los usuarios de dispositivos móviles. Permite al usuario no tener que descargar todo el contenido de una vez, haciendo así más ligera la aplicación o sitio móvil.
Para contar historiasPor lo tanto, el desplazamiento infinito es esencial para mantener al usuario interesado y comprometido. Sin embargo, debe utilizarse con prudencia y sólo cuando sea realmente necesario.
Los sitios web con desplazamiento interminable o muy largo se están convirtiendo en uno de los más populares en la actualidad. Sí, la tendencia apareció hace un par de años, pero poco a poco se está volviendo cada vez más famosa. Y llamar a ese desplazamiento moda, estilo o “truco” no es correcto. Más bien, es una necesidad. La necesidad de presentar grandes contenidos a los ojos de los visitantes. Literalmente, ábreles todo lo que hay en el sitio.
Todos conocemos las interminables descargas de novedades en VKontakte, Facebook, Twitter y otras redes sociales, por lo que no es difícil imaginar de qué estamos hablando.
Y lo más interesante es que ese desplazamiento tiene ventajas. Por un lado, hay casi un 100% de implicación del usuario en el aprendizaje del contenido. No tiene que distraerse, estudiar menús, secciones, esperar a que se carguen las siguientes páginas, ni siquiera tiene que pensar en la navegación.
Por otro lado, se demanda el desplazamiento infinito en dispositivos móviles. Cómo tamaño más pequeño pantalla, más desplazamiento será necesario. Es poco lo que se puede colocar en una pantalla de este tipo, por lo que los títulos, una breve descripción, una pequeña imagen, y esto es suficiente. Ya en pantallas grandes También podrás visualizar navegación, botones, marcos, diferentes bloques, etc. Además, al gestionar el espacio en pantalla del móvil, el desplazamiento se vuelve más accesible para su uso.
Pero esta es una cara de la moneda. ¿Qué pasa con los diseñadores? ¿Qué encuentran en el desplazamiento interminable? ¿Por qué intentan aplicarlo a proyectos de diferentes temáticas y estilos, incluso si no tienen? versión móvil? Es simple: Infinity es conveniente para la conversión, para llamar la atención, para ideas artísticas, por ejemplo, Apple Mac Pro, Boat, Firewatch.
.jpg)
Y aunque no todos los sitios pueden utilizar el desplazamiento infinito, existen ideas y soluciones de expertos sobre cómo lograr el éxito.
PromociónLos usuarios se desplazarán más y más sólo cuando estén interesados. Especialmente cuando la descarga está completa. pagina de inicio. Por tanto, si ven las fotografías, los titulares y el texto que necesitan, entonces no hay dudas sobre sus acciones. Los diseñadores han incorporado esto, por ejemplo, en las colecciones Cheetos, Photobazaar, Komarnicki en Pinterest, Deviantart; primero intentan interesar a las personas en el contenido y luego permiten a los visitantes buscar y explorar lo que está disponible.
Muchos diseñadores web se esfuerzan por no imponer pergamino largo a los espectadores. Y esto es cierto, porque no siempre ni todos los usuarios quieren desplazarse y desplazarse sin cesar por el contenido en busca de algo interesante o necesario. Además, siempre querrás tener algunas pautas ante tus ojos: dónde estamos, qué sección, qué más hay en el sitio. Es por eso que a menudo vemos una barra de navegación flotante en la parte superior de la página. Y esto es conveniente, ya que el desplazamiento sin fin simplemente oculta la línea del menú y no siempre es conveniente cambiar a otra sección. Estos son Uplug, Voux, Geranandpartners, Company.airbus (la navegación se ha movido hacia la derecha).
El desplazamiento interminable o incluso prolongado puede hacer que los usuarios se pierdan en la página. Les resulta más difícil navegar: al principio están todavía o ya en el medio. Además, incluso si hay un botón "arriba" o "atrás" (generalmente en forma de flecha), los visitantes regresan al principio de la página y no al lugar donde lo dejaron. En el servicio de noticias de VKontakte, "Atrás" se implementa precisamente por conveniencia. Es decir, devuelve nuestra mirada al lugar donde impactamos antes. El trabajo en Flickr se implementa de manera similar.
Si seleccionas una imagen, la abres en la misma ventana y luego pulsas el botón “atrás”, volveremos exactamente al momento en el que estábamos antes, y no al principio de la página. Las tiendas online etsy y amazon funcionan de manera similar. Pero, por el contrario, el proyecto Fomo no lo permite. Siempre se cargará la parte superior de la página con mosaicos y materiales. E incluso Boomandthehearty tampoco está allí, a pesar de lo aparentemente no tan navegación sencilla en gran volumen
contenido.
En su mayor parte, los diseñadores web se esfuerzan por garantizar que se recuerde la información sobre la posición de la página de un visitante en particular. Y es conveniente incluso en dispositivos móviles.Actividad ante los ojos
De acuerdo, pero es muy conveniente si no solo sabes que la información de la página se actualiza con cierta frecuencia, sino que también ves esta actualización. Y los diseñadores usan esto con frecuencia, agregando una variedad de indicadores de progreso de carga. El indicador también se utiliza para cargar contenido. Al mismo tiempo, la animación de carga es tan rápida, casi instantánea, que muchas veces los ojos ni siquiera la captan.
Impacto en el infinito
Es difícil decir si esto es bueno o malo. Depende, por supuesto, del contenido, sus características y requisitos de asimilación.
Facilidad de visualizaciónEn primer lugar, se trata de tiendas online y fichas de productos. Por ejemplo, los webmasters agregan íconos de "Me gusta" o "Agregar a favoritos" a cada producto. Esto hace que sea más fácil estudiar el contenido si hay mucho. Además, durante la búsqueda también se muestra la cantidad encontrada. Es decir, aunque la página con los productos seleccionados sea increíblemente larga, el usuario ya sabe aproximadamente cuánto ha mirado y cuánto le queda todavía. Esto es conveniente, aunque los diseñadores a menudo ignoran este enfoque. Es mucho más fácil crear tarjetas con productos y cargarlas en un solo lienzo. Esto es lo que hicieron Ericbeauduin, Vagabond, Skechers, incluso el banco de fotografías Photobazaar no ofrece seleccionar fotografías para el futuro.
Pero otros proyectos, por el contrario, te permiten ordenar información. Estos son Wildberries, Ozon, Lamoda.
Es difícil imaginar un sitio web moderno sin efectos. Sin ellos sería aburrido. Algunos incluso lo considerarían simple y aburrido. Y la forma más fácil de revivir durante mucho tiempo y paginas interminables con contenido: esto es agregar una animación de carga, apariencia suave mosaicos de contenido. Y por supuesto, el paralaje en sus diversas manifestaciones.
Como sabes, en promedio un usuario permanece en la página de un sitio web durante 8 segundos. Si está interesado se quedará más tiempo y volverá en el futuro. Y así, el paralaje puede añadir interés y atraer la atención de los visitantes. Hablamos antes de la esencia. este efecto y cómo afecta la conversión.
Pero a veces los diseñadores, al usarlo cuando carga sin fin Los pueblos, por el contrario, sólo hacen daño. Por ejemplo, desea comprar algo y cada vez tiene que observar el efecto de paralaje mientras espera que se cargue la información del producto o ver el efecto de animación. ¿Lindo? No es bueno. La tienda Ericbeauduin utilizó el efecto pseudoparalaje, pero muy poco. No interrumpe nuestro flujo habitual de aprendizaje de contenidos, pero añade un poco de entusiasmo.
.jpg)
El desplazamiento interminable de las páginas es interesante, da cabida a la imaginación y la creatividad. Pero una cosa es considerar simplemente los métodos de implementación y algunos aspectos de un fenómeno como el desplazamiento interminable de páginas. Encontrarlo es otra cuestión. Realmente hermoso.
Lexus ofrece aprendizaje sobre tecnología, ingeniería y más de una manera única. El tema del contenido se selecciona mediante el movimiento del mouse y, después de la selección, se redirige a la página correspondiente. Aquí todas las imágenes están distorsionadas en perspectiva y se ofrece una carga adicional de material. Hay animación de transiciones y apariciones, pero es ligera y casi imperceptible. Y el paralaje se utiliza en la página principal para seleccionar temas.
Claridgeicon tiene un desplazamiento largo, pero interesante. Incluso si nosotros no tenemos nada que ver con la construcción o el diseño de edificios, este sitio lo cautivará. Hay tanto contenido, y tan diferente, que involuntariamente te desplazas por la página y lo miras. O videos, luego dibujos, luego infografías, luego fotografías. Y sí, el menú "fijo" superior siempre está visible y cada elemento está adjunto a la sección de la página. ¿Qué podemos decir del vídeo panorámico de 360 grados?
Foodisforeating con un secreto. La navegación es tan pequeña que es fácil pasarla por alto y no notarla, pero tiene una pagina grande con desplazamiento que afecta... visualización de contenido e infografías. Sí, esto también sucede. En otras palabras, no basta con desplazarse hacia abajo. Usando la rueda del ratón podrás ver la carga de imágenes, la aparición gradual de texto, gráficos, etc. Es difícil de describir, pero es mejor verlo con tus propios ojos. Hay muchos efectos, pero en general todo parece simple y funcional.
El canal Nationalgeographic también puede sorprender. Es posible que la página no parezca grande ni larga, pero se puede desplazar por el contenido. lados diferentes. Hay muchas secciones y secciones, y cada una tiene desplazamiento de izquierda a derecha y de arriba hacia abajo. En este caso, no se carga solo una selección de posts, sino todo el entorno (fotos, vídeos, noticias, artículos) sobre algún tema. Original y claro. Realmente miras, buscas e incluso examinas. Y esa implicación tiene un efecto positivo en la conversión.
Powerofpossible habla sobre energía humana, tecnología, capacidades humanas, petróleo y energía solar y mucho más. Pero lo cuenta en forma animada, donde cada contenido aparece a medida que desplaza la rueda del mouse. Además, todo fue creado en hermosos fondos, con la misteriosa idea de personas y pensamientos que aparecen en las nubes, y luego descienden a la tierra y bajo el agua (el mundo submarino). pagina larga, desplazamiento largo, pero contenido interesante.
Twinpinejourney también ofrece historia y detalles de los casinos y hoteles Twin Pine en California. Por un lado, se propone simplemente ver la página de arriba a abajo y, por otro lado, desplazarse por las secciones individuales de izquierda a derecha para conocer algunos detalles. Incluso la hoja de ruta tiene animación, que depende del desplazamiento de la rueda del mouse. E incluso depende de tu velocidad de desplazamiento. Todo es interesante y hermoso.
Todavía hay muchas ideas innovadoras y desplazarse sin cesar o durante mucho tiempo por estos sitios no causa irritación ni inconvenientes. De una forma u otra, esto, si no una tendencia, sino un fenómeno, puede crear una experiencia emocionante completamente inimaginable al visitar un sitio. Si el desplazamiento es intuitivo, de manera similar interfaz de usuario, entonces ella sólo es bienvenida.
En cualquier caso, debes decidir claramente por ti mismo si es necesario el desplazamiento infinito. este proyecto O no. No basta con seleccionar el contenido y escribir código para que todo se cargue inmediatamente en la página principal.
Esto significa que hay mucho espacio para ideas y se pueden implementar muchas veces y siempre de diferentes maneras. Lo que confirma una vez más que el diseño web es un campo muy creativo, innovador y tecnológico.
Empezaremos con página normal galería que contiene un contenedor para nuestras imágenes, y rastrearemos la posición de desplazamiento usando la llamada Funciones de JavaScript con un breve intervalo. Cada vez que la barra de desplazamiento esté en la parte inferior de la página, haremos solicitud AJAX co PHP externo un archivo que devuelve una lista de nombres de imágenes. Después de eso, todo lo que tenemos que hacer es agregar estas imágenes a nuestro contenedor y modificar la altura de la página moviendo la posición de desplazamiento hacia arriba.
Paso 2: marcado HTMLAquí sólo necesitamos configurar el título y el contenedor de nuestras imágenes. Las miniaturas se agruparán en conjuntos de tres líneas. Cada miniatura contiene un enlace a la imagen en tamaño completo. Después de cada grupo agregaremos texto que muestra el número total de imágenes mostradas y un enlace a la parte superior de la página.
Galería web| Desplazamiento infinito 
Mostrando 9 imágenes | Arriba
Paso 3: CSS CSS también es bastante simple.
Cuerpo( fondo:#222; color:#666; ) #header( familia de fuentes:Arial, Helvetica, sans-serif; tamaño de fuente:24px; peso de fuente:negrita; alineación de texto:izquierda; sangría de texto: 35px; margen: 0 automático; ancho: 800px; margen inferior: 10px; p(color: #444; alineación de texto: izquierda; tamaño de fuente: 10px; margen inferior: -10px; 
Ahora agreguemos algo de CSS3 para redondear las esquinas y dibujar sombras. Necesito usar -moz-box-sombra Y -moz-border-radio para Firefox y -webkit-caja-sombra Y -webkit-borde-radio para Chrome y Safari.
#container( margen: 0 auto; ancho:800px; borde:1px sólido #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-family:Verdana, Ginebra, sans-serif; texto -align:center; ) img( borde:10px sólido #444; -moz-border-radius: 5px; -webkit-border-radius: 10px; margen: 15px; ) img:hover( borde-color:#555; - moz-box-sombra: 0px 0px 15px #111; -webkit-box-sombra: 0px 0px 15px #111; 
Será muy corto. Necesitamos llamar a un script PHP con el índice de la siguiente imagen que necesitamos como parámetro. Lo primero que debemos hacer es tomar todos los nombres de las imágenes de la carpeta y almacenarlos en una matriz. Hay dos carpetas para almacenar imágenes: pulgar Y imagen, que contienen miniaturas y imágenes de tamaño completo, respectivamente. Las miniaturas deben tener exactamente los mismos nombres que las imágenes en tamaño completo.
Como se mencionó, las imágenes se agrupan en conjuntos de tres filas, cada una de las cuales contiene tres imágenes. De esta manera solo necesitamos devolver nueve nombres de imágenes para el grupo. Partimos del índice que recibimos como parámetro, $n, y terminamos $n+9. En cada paso del bucle agregamos el nombre de la imagen y ";" después de él en la línea de texto devuelto. Hay un pequeño truco aquí. No necesitamos un número infinito de números de imágenes. Para crear un efecto galería interminable, que nunca termina, cada vez el índice de la siguiente imagen debe ser mayor que el número total de imágenes y debemos empezar desde el principio. Esto se hace usando la función % (división de módulo) índice y número total de imágenes.
$i%count($archivos)
Como resultado, obtenemos el resto de la división. Por ejemplo, si el índice $yo contar ($archivos) es 45, el resultado será 5. Y si el índice $yo es 50 y el numero de imagenes contar ($archivos) es 65, entonces el resultado será 50. Finalmente, devolvemos el texto de respuesta.
Paso 7Aquí está texto completo Guión PHP. Debe colocarse en un archivo nuevo. .php.
Paso 8: JavaScript
Definamos varias variables que serán necesarias más adelante:
Altura del contenido Var = 800; var alturaPágina = document.documentElement.clientHeight; var posición de desplazamiento; varn = 10; var xmlhttp; 
Para determinar cuándo estará la barra de desplazamiento en la parte inferior de la página, necesitamos definir tres variables:
- altura del contenido- altura de la galería original
- altura de la página- altura página visible en el navegador
- posición de desplazamiento- posición de la barra de desplazamiento medida desde arriba
También necesitaremos una variable para almacenar el índice de la siguiente imagen (que pasamos al script PHP) y una variable para el objeto de solicitud Ajax.
Paso 9Necesitamos definir una función que agregará imágenes a nuestro contenedor HTML.
Función putImages())( si (xmlhttp.readyState==4)( si(xmlhttp.responseText)(
El objeto de solicitud cambia sus estados durante la ejecución de la solicitud. Cada estado está asociado a un valor numérico. Nos interesa el estado final cuando se completa la solicitud y el valor es 4. Primero verificamos si la solicitud está en el estado deseado y luego verificamos si recibimos una respuesta o no.
Paso 10Si se cumplen ambas condiciones, debemos procesar el texto devuelto. Esto significa que tenemos que separar los nombres de los archivos y colocarlos en una matriz. El script PHP devuelve una sola cadena con nombres separados por punto y coma, por ejemplo: "Achievements.jpg;Bw.jpg;Camera.jpg;Cat-Dog.jpg;CREATIV.jpg;creativ2.jpg;Earth.jpg;Endless.jpg ; LucesInfinitas.jpg;"
Var resp = xmlhttp.responseText.replace("\r\n", ""); archivos var = resp.split(";");
Necesitamos resolver un pequeño problema. El texto de la respuesta puede contener un carácter principal. nueva linea en primera posición. Y no lo necesitamos. El problema se puede resolver fácilmente usando la función. reemplazar, que toma dos parámetros: "\r\n" - un carácter de nueva línea y "" - una cadena vacía que reemplaza todas las apariciones del primer parámetro. Ahora solo queda dividir la línea usando el símbolo ";".
Paso 11Ahora agregamos imágenes a nuestro contenedor.
Var j = 0; para(yo=0; yo
