При разработке станции Soufang Home M, эффект отображения альбома Soufang Home Derending Trending требует использования плагина PhotoShipe для отображения изображений.
Функции:
1. Интерфейс, предоставленный домом, может получить только одну картину за раз
2. Количество декоративных визуализаций не ограничено.
3. Судя по использованию PhotoSwipe, все изображения должны быть перечислены до того, как PhotoShipe будет инициализирован.
exante = photoswipe.attach (window.document.queryselectorall ('#Галерея A'), Options);
Tag A IS до инициализации PhotoSwipe, и динамическое добавление его в галерею недействительна.
Текущее решение состоит в том, чтобы сначала позвонить в интерфейс 10 раз и перечислить 10 изображений. После отображения этих 10 изображений перейдите на следующую страницу через URL, чтобы отобразить 10 изображений в следующей группе.
Преимущества этого решения
1. Легко достичь.
Недостатки также очень очевидны:
1. Каждый раз, когда вы прыгаете на следующую страницу, пользователь будет долго ждать. (В 10 раз интерфейс называется + время, когда текущее изображение загружается на клиент + в другое время)
2. В то время как изображение скользит влево и вправо, внезапный прыжок на страницу в следующем году также влияет на пользовательский опыт.
Как оптимизировать PhotoSwipe, чтобы достичь страницы и без прыжков.
Любой, кто использовал PhotoSwipe, должен знать Photoswipe.eventtypes.ondisplayimage. Это событие будет вызвано каждый раз, когда отображается изображение.
exance.addeventhandler (photoswipe.eventtypes.ondisplayimage, function (e) {// реализовать некоторые кодовые функции здесь.});Благодаря исследованиям обнаружено, что сборы отображаемых объектов изображения можно получить через e.target.cache.images. Этот способ мышления яснее - «сначала определите достаточно заполнителя, а затем непрерывно получите адрес изображения один за другим через AJAX во время раздвижного отображения изображения, а затем назначайте соответствующее изображение в e.target.cache.images collection».
Следующий код - это реализация этого метода идеи (для удобства объяснения этой идеи, дополнительные данные были опущены)
<ul id = "Галерея" style = "Display: none;"> <!-Следующие 10-это изображения, полученные с начала через интерфейс-> <li> <a href = "viewimage/zxb/2014_06/30/82/86/pic/000711232400/800x800.jpg" 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/15/15/PIC/007331476000/800X800.jpg"> </a> </li> <li> <a href = "ViewImage/ZXB/2014_05/06/44/99/PIC/004717983300/800X800.jpg"> </a> </li> <!-Ниже приведен заполнитель A Tag-> <li> <a href = "common_m/m_public/Images/load. href = "common_m/m_public/images/load.gif"> </a> </li> <li> <a href = "common_m/m_public/images/загрузка href = "common_m/m_public/images/load.gif"> </a> </li> <!-Вы можете добавить несколько тегов заполнителей A по мере необходимости-> </ul>
Выслушивая событие Photoswipe.eventtypes.ondisplayimage, измените e.target.cache.images, чтобы исправить адрес изображения заполнителя до загрузки изображения.
var iamgarrindex = 0; var picsetindex = 10; ancess.addeventhandler (photoswipe.eventtypes.ondisplayimage, function (e) {var eaffitiMg = e.target.cache.images [picsetindex ++]; if (eaffitimg) { $ .getJson ("./ index.php? C = jiaju & a = ajaxnextpicinfo & picid = {picid parameter}", function (data) {var url = data [0] ["img"] new image. $ (ueptImg.metadata.item) в коллекции изображений photoswipe.data ('comment', ''); // установить другое дополнительное содержимое таким образом})}});index.php? C = jiaju & a = ajaxnextpicinfo & picid = {picid parameter} Возвращает содержание. Согласно различным PICID, соответствующая информация изображения возвращается каждый раз.
Кода -код выглядит следующим образом: [{"img": http: //img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.