Al desarrollar la estación Soufang Home M, el efecto de visualización del álbum Soufang Home Decoring Rendering requiere el uso del complemento Photoswipe para mostrar imágenes.
Características:
1. La interfaz proporcionada por la casa solo puede obtener una imagen a la vez
2. El número de representaciones de decoración es ilimitado.
3. A juzgar por el uso de Photoswipe, todas las imágenes deben aparecer antes de que Photoswipe se inicialice.
instancia = Photoswipe.attach (Window.document.QuerySelectorAll ('#Gallery A'), opciones);
La etiqueta A es antes de la inicialización de Photoswipe, y agregarla dinámicamente a la galería no es válida.
La solución actual es llamar a la interfaz 10 veces primero y enumerar 10 imágenes. Después de mostrar estas 10 imágenes, salte a la página siguiente a través de la URL para mostrar las 10 imágenes en el siguiente grupo.
Las ventajas de esta solución son
1. Fácil de lograr.
Las desventajas también son muy obvias:
1. Cada vez que saltas a la página siguiente, el usuario esperará mucho tiempo. (10 veces la interfaz se llama + el momento en que la imagen actual se descarga al cliente + otra vez)
2. Mientras la imagen se desliza hacia la izquierda y hacia la derecha, el salto repentino a la página del próximo año también afecta la experiencia del usuario.
Cómo optimizar Photoswipe para no alcanzar ninguna página y sin salto.
Cualquiera que haya usado Photoswipe debe conocer Photoswipe.EventTypes.onduestlayImage. Este evento se activará cada vez que se muestre una imagen.
instance.addeventhandler (Photoswipe.eventTypes.ondisplayImage, function (e) {// implementa algunas funciones de código aquí.});A través de la investigación, se encuentra que se puede acceder a la colección de objetos de imagen que se muestran a través de e.target.cache.Images. Esta forma de pensar es más clara: "Primero, defina suficiente marcador de posición y luego obtenga continuamente la dirección de la imagen uno por uno a través de Ajax durante la pantalla deslizante de imagen, y luego asigne la imagen correspondiente en la colección de imágenes e.target.cache.images".
El siguiente código es la implementación de este método de idea (para la comodidad de explicar esta idea, se han omitido los detalles adicionales)
<ul id = "Gallery" style = "Display: Ninguno;"> <!-Las siguientes 10 son las imágenes obtenidas desde el principio a través de la interfaz-> <li> <a href = "ViewImage/ZXB/2014_06/30/82/86/PIC/000711232400/800X800.JPG"> </a> </li> <AI> <A a a a. href = "ViewImage/ZXB/2014_04/18/11/94/pic/0006645552500/800x800.jpg"> </a> </li> <li> <a href = "ViewImage/ZXB/2014_06/14/69/65/Pic/002962064200/800x800.jpg"> </a> </li> <li> <a href = "ViewImage/ZXB/2014_06/05/75/33/Pic/005426525600/800x800.png"> </a> </li> <li> <A href = "ViewImage/ZXB/2014_02/12/13/15/Pic/007331476000/800x800.jpg"> </a> </li> <li> <a href = "ViewImage/ZXB/2014_05/06/44/99/pic/0047179833300/800x800.jpg"> </a> </li> <!-El siguiente es el poseedor de una etiqueta-> <li> <a href = "común_m/m_public/imágenes/carga.gif"> </a> href = "común_m/m_public/images/loading.gif"> </a> </li> <li> <a href = "común_m/m_public/image/loading.gif"> </a> </li> <li> <a href = "común_m/m_public/image/loading.gif"> </a> </li> <li> href = "común_m/m_public/image/loading.gif"> </a> </li> <!-puede agregar múltiples marcadores de posición a las etiquetas según sea necesario-> </ul>
Al escuchar el evento Photoswipe.eventTypes.ONDISPLAYIMAGE, modifique e.target.cache.Images para corregir la dirección de la imagen del marcador de posición antes de descargar la imagen.
var aImGarrIndex = 0; var picSetIndex = 10; instance.addeventhandler (Photoswipe.eventTypes.ondisplayImage, function (e) {var necesidades necesarias = e.target.cache.images [picSetIndex ++]; if (necesarTImg) { $ .getjson ("./ index.php? c = jiaJu & a = aJaxNextPicinfo & picID = {Picid Parameter}", function (data) {var url = data [0] ["img"] nueva imagen (). src = url; // prevalece esta imagen necesariamente $ (Needsetimg.Metadata.Item) en la colección de imágenes de Photoswipe.data ('comentario', ''); // Establezca otros contenidos adicionales de esta manera})}});index.php? c = jiaju & a = ajaxnextpicinfo & picid = {Picid Parameter} Devuelve el contenido. Según los diferentes PICID, la información relevante de una imagen se devuelve cada vez.
La copia del código es la siguiente: [{"img": http: //img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]]
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.