Lors du développement de la station M Home Soufang, l'effet d'affichage de l'album de rendu Soufang Decoration nécessite l'utilisation du plug-in Photoswipe pour afficher des images.
Caractéristiques:
1. L'interface fournie par la maison ne peut obtenir qu'une seule image à la fois
2. Le nombre de rendus de décoration est illimité.
3. À en juger par l'utilisation de Photoswipe, toutes les photos doivent être répertoriées avant l'initialisation de Photoswipe.
instance = Photoswipe.attach (window.Document.QuerySelector ('# galerie a'), options);
Le tag A est avant l'initialisation de Photoswipe, et l'ajouter dynamiquement à la galerie n'est pas valide.
La solution actuelle consiste à appeler l'interface 10 fois en premier et à répertorier 10 images. Après avoir affiché ces 10 images, passez à la page suivante via l'URL pour afficher les 10 images du groupe suivant.
Les avantages de cette solution sont
1. Facile à réaliser.
Les inconvénients sont également très évidents:
1. Chaque fois que vous passez à la page suivante, l'utilisateur attendra longtemps. (10 fois l'interface est appelée + le moment où l'image actuelle est téléchargée sur le client + autre fois)
2. Alors que l'image glisse à gauche et à droite, le saut soudain vers la page l'année prochaine affecte également l'expérience utilisateur.
Comment optimiser Photoswipe pour obtenir aucune page et pas de saut.
Quiconque a utilisé Photoswipe devrait connaître Photoswipe.EventTypes.onDisplayImage. Cet événement sera déclenché chaque fois qu'une image est affichée.
instance.addeventHandler (Photoswipe.EventTypes.ondisplayImage, fonction (e) {// implémenter certaines fonctions de code ici.});Grâce à la recherche, on constate que la collection d'objets d'image affichés peut être accessible via e.target.cache.images. Cette façon de penser est plus claire - "Définissez d'abord suffisamment d'espace réservé, puis obtenez en continu l'adresse de l'image un par un via Ajax pendant l'affichage glissant d'image, puis affectez l'image correspondante dans la collection d'images e.target.cache.images."
Le code suivant est la mise en œuvre de cette méthode d'idée (pour la commodité d'expliquer cette idée, les détails supplémentaires ont été omis)
<ul id = "galerie" style = "Affichage: aucun;"> <! - Les 10 suivants sont les images obtenues du début à l'interface -> <li> <a href = "ViewImage / ZXB / 2014_06 / 30/82 / 86 / pic / 000711232400 / 800x800.jpg"> </a> </li> <li> <A href = "ViewImage / ZXB / 2014_04 / 18/11/94 / pic / 000664552500 / 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 / 004717983300 / 800x800.jpg"> </a> </li> <! - Ce qui suit est le titulaire de place un balise -> <li> <a href = "Common_M / M_Public / Images / Loading.gif"> </a> href = "Common_M / M_Public / Images / Loading.gif"> </a> </li> <li> <a href = "Common_M / M_Public / Images / Loading.gif"> </a> </li> <li> <a href = "Common_M / M_PUBLIC / Images / Loading.gif"> </a> href = "commun_m / m_public / images / charging.gif"> </a> </li> <! - Vous pouvez ajouter plusieurs balises en place selon les requises -> </ul>
En écoutant l'événement Photoswipe.EventTypes.ondisplayImage, modifiez e.target.cache.images pour corriger l'adresse de l'image de l'image d'espace réservé avant le téléchargement de l'image.
var AimGarRindex = 0; var picseTindex = 10; instance.addeventHandler (Photoswipe.EventTypes.ondisplayImage, fonction (e) {var NeedsEtimg = e.target.cache.images [PicseTindex ++]; if (NeedsEtimg) { $ .getjson ("./ index.php? c = jiaju & a = ajaxnextpicinfo & picid = {picId Paramètre}", fonction (data) {var url = data [0] ["img"] nouvelle image (). src = url; // preload cet objectif a besoin d'image ["src"] = url; // affecte l'adresse d'image pour l'image. $ (NeedsEtimg.Metadata.Item) dans la collection d'images de Photoswipe.data ('comment', ''); // Définissez d'autres contenus supplémentaires de cette manière})}});index.php? C = jiaju & a = ajaxnextpicinfo & picid = {paramètre PICID} Renvoie le contenu. Selon les différents PICIDS, les informations pertinentes d'une image sont retournées à chaque fois.
La copie de code est la suivante: [{"img": http: //img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]]
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.