Photoswipe asynchronous Dynamic loading picture method _javascript Skills

Search House in the development of home m station, search room home Decoration effect Map album display effect needs to use Photoswipe plug-ins to display pictures.
Features:
1. Home provided interface, only get one picture at a time
2. Decoration effect diagram of the number of sheets not limited.
3. In terms of photoswipe usage, all pictures must be listed before Photoswipe initialization.
instance = Photoswipe.attach (Window.document.querySelectorAll (' #Gallery a '), options);

Label A is not valid until Photoswipe is initialized and then dynamically added to gallery.

The current scheme is to call 10 interface first, listing 10 pictures, when the display of these 10 pictures, through the Web site to jump to the next page, showing the next group of 10 pictures.

The Advantage of this scheme is that
1. Easy to achieve.
The disadvantages are also obvious:
1. Each jump to the next page will allow the user to wait for a long time. (10 times to call the interface + the current picture download to the client time + other time)
2. In the process of sliding around the picture, suddenly the next year page jump also affected the user experience.
How to optimize PHOTOSWIPE implementation without paging.
Anyone who has ever used photoswipe should know PhotoSwipe.EventTypes.onDisplayImage. This event is triggered each time a picture is displayed.

Instance.addeventhandler (PhotoSwipe.EventTypes.onDisplayImage, function (e) {
  //implements some code functions here.
 

A collection of picture objects that can be accessed through e.target.cache.images is found through the study. The idea is clearer-"define enough a placeholder first, then constantly get the address of the picture in the process of sliding the picture, and then assign the corresponding picture in the E.target.cache.images picture collection." ”

The following code is the implementation of this method of thinking (in order to facilitate the explanation of this idea, omitted the additional details)

<ul id= "Gallery" style= "Display:none;" > <!--The following 10 are the first pictures--> <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> <!--below is placeholder a label--> <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> <!--can add multiple above placeholder a label according to requirement--> </ul>

By listening for PhotoSwipe.EventTypes.onDisplayImage events, modify the e.target.cache.images to make the address of the placeholder picture correct before the picture is downloaded.

var aimgarrindex=0;
var picsetindex = ten;
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 picture
      needsetimg["src"] = url;// Assign the picture address to the corresponding object attribute $ (needSetImg.metaData.item) in the picture collection of Photoswipe
      . Data (' comment ', '), or other additional content through this setting
    })
  }
});

Index.php?c=jiaju&a=ajaxnextpicinfo&picid={picid parameter} returns the content. Returns information about a picture each time it is invoked, depending on the picid.

Copy Code code as follows:

[{"IMG": yun_qi_img/800x800.jpg}]

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.