When developing Soufang Home M Station, the Soufang Home Decoration rendering album display effect requires the use of PhotoSwipe plug-in to display pictures.
Features:
1. The interface provided by the home can only get one picture at a time
2. The number of decoration renderings is unlimited.
3. Judging from the usage of PhotoSwipe, all pictures must be listed before PhotoSwipe is initialized.
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
Tag a is before PhotoSwipe initialization, and dynamically adding it to Gallery is invalid.
The current solution is to call the interface 10 times first and list 10 pictures. After displaying these 10 pictures, jump to the next page through the URL to display the 10 pictures in the next group.
The advantages of this solution are
1. Easy to achieve.
The disadvantages are also very obvious:
1. Every time you jump to the next page, the user will wait for a long time. (10 times the interface is called + the time when the current image is downloaded to the client + other time)
2. While the picture is sliding left and right, the sudden jump to the page in the next year also affects the user experience.
How to optimize PhotoSwipe to achieve no page and no jump.
Anyone who has used PhotoSwipe should know PhotoSwipe.EventTypes.onDisplayImage. This event will be triggered every time a picture is displayed.
instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){ //Implement some code functions here. });Through research, it is found that the collection of image objects displayed can be accessed through e.target.cache.images. This way of thinking is clearer - "First define enough a placeholder, and then continuously obtain the address of the picture one by one through AJAX during the image sliding display, and then assign the corresponding picture in the e.target.cache.images image collection."
The following code is the implementation of this idea method (for the convenience of explaining this idea, the additional details have been omitted)
<ul id="Gallery" style="display:none;"><!-- The following 10 are the pictures obtained from the beginning through the 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/31/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><!-- The following is the placeholder a tag--><li><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></li><li><a href="common_m/m_public/images/loading.gif"></a></li><li><a href="common_m/m_public/images/loading.gif"></a></li><!-- You can add multiple placeholder a tags as required--></ul>
By listening to the PhotoSwipe.EventTypes.onDisplayImage event, modify e.target.cache.images to correct the address of the placeholder image before the image is downloaded.
var aimgArrIndex=0;var picSetIndex = 10;instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){ var needSetImg = e.target.cache.images[picSetIndex++]; if(needSetImg){ $.getJSON("./index.php?c=jiaju&a=ajaxNextPicInfo&picid={picid parameter}", function(data){ var url = data[0]["img"] new Image().src = url;//Preload this image needSetImg["src"] = url;//Assign the image address to the corresponding object attribute $(needSetImg.metaData.item) in the image collection of PhotoSwipe.data('comment','');//Set other additional contents in this way}) }});index.php?c=jiaju&a=ajaxNextPicInfo&picid={picid parameter} Returns the content. According to the different picids, the relevant information of a picture is returned every time.
The code copy is as follows:[{"img":http://img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.