Bei der Entwicklung von Soufang Home M Station erfordert der Soufang Home Decoration Rendering Album Display-Effekt die Verwendung von Fotoswipe-Plug-In, um Bilder anzuzeigen.
Merkmale:
1. Die vom Haus bereitgestellte Schnittstelle kann jeweils nur ein Bild erhalten
2. Die Anzahl der Dekorationsrenderungen ist unbegrenzt.
3. Nach der Verwendung von Fotoswipe müssen alle Bilder aufgeführt sein, bevor Fotoswipe initialisiert wird.
Instance = fotosWipe.attach (window.document.querySelectorAll ('#Galerie A'), Optionen);
Tag A ist vor der Photoswipe -Initialisierung, und es ist ungültig, sie dynamisch zur Galerie hinzuzufügen.
Die aktuelle Lösung besteht darin, die Schnittstelle 10 -mal zuerst aufzurufen und 10 Bilder aufzulisten. Nachdem Sie diese 10 Bilder angezeigt haben, springen Sie zur nächsten Seite über die URL, um die 10 Bilder in der nächsten Gruppe anzuzeigen.
Die Vorteile dieser Lösung sind
1. leicht zu erreichen.
Die Nachteile sind auch sehr offensichtlich:
1. Jedes Mal, wenn Sie zur nächsten Seite springen, wartet der Benutzer lange. (10 -mal wird die Schnittstelle als + die Zeit bezeichnet, in der das aktuelle Bild in die Client + andere Zeit heruntergeladen wird)
2. Während das Bild nach links und rechts rutscht, wirkt sich der plötzliche Sprung auf die Seite im nächsten Jahr auch auf die Benutzererfahrung aus.
So optimieren Sie Fotoswipe, um keine Seite und keinen Sprung zu erreichen.
Jeder, der Fotoswipe verwendet hat, sollte fotoswipe.eventypes.ondisplayImage kennen. Dieses Ereignis wird jedes Mal ausgelöst, wenn ein Bild angezeigt wird.
Instance.AdDeVentHandler (fotoswipe.eventTypes.onDisplayImage, Funktion (e) {// Implementieren Sie hier einige Codefunktionen.});Durch die Forschung wurde festgestellt, dass die Sammlung der angezeigten Bildobjekte über e.Target.cache.images zugegriffen werden kann. Diese Denkweise ist klarer - "Definieren Sie zuerst genug einen Platzhalter und erhalten Sie dann kontinuierlich die Adresse des Bildes eins nach eins durch Ajax während der Bildschiebetanzeige und zuweisen dann das entsprechende Bild im Bildsammlung von E.Target.cache.images."
Der folgende Code ist die Implementierung dieser Ideenmethode (um diese Idee zu erklären, wurden die zusätzlichen Details weggelassen)
<ul id = "Galerie" style = "display: keine;"> <!-Die folgenden 10 sind die Bilder, die von Anfang an über die Schnittstelle erhalten wurden-> <li> <a href = "viewimage/zxb/2014_06/30/82/86/pic/000711232400/800x800.jpg" 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> <! href = "Common_m/m_public/bilder/loading.gif"> </a> </li> <li> <a href = "Common_m/m_public/bilder/laden.gif"> </a> </li> <li> <a href = "commor_m/m_public/loading.gif" href = "Common_m/m_public/bilder/lade.gif"> </a> </li> <!
Durch das Anhören des Ereignisses von fotoswipe.eventypes.onplSPlayImage e.Target.cache.images, um die Adresse des Platzhalterbildes vor dem Herunterladen des Bildes zu korrigieren.
var aimgarrindex = 0; var picsetIndex = 10; Instance.AdDeVentHandler (fotoswipe.eventTypes.ondisplayImage, Funktion (e) {var bedarfssetImg = e.target.cache.images [picsetindex ++]; if (bedarfssetImg) {{{{{picsetindeIndex) {picsetindex ++; $ .getJson ("./ index.php? c = jiaju & a = ajaxnextpicinfo & picid = {picid parameter}", Funktion (data) {var url = data [0] ["img"] new Image (). $ (NeedsetImg.metadata.Item) In der Bildsammlung von fotoswipe.data ('Kommentar', ''); // Legen Sie andere zusätzliche Inhalte auf diese Weise fest})}});index.php? c = jiaju & a = ajaxnextpicinfo & picid = {picid parameter} Gibt den Inhalt zurück. Nach den verschiedenen Picids werden die relevanten Informationen eines Bildes jedes Mal zurückgegeben.
Die Codekopie lautet wie folgt: [{"img": http: //img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.