在移动设备上的 JQuery 移动应用程序中使用 Photoswipe 的空白页答案

【问题标题】：Blank Page with using Photoswipe in JQuery Mobile App on Mobile Devices在移动设备上的 JQuery 移动应用程序中使用 Photoswipe 的空白页
【发布时间】：2012-11-16 21:13:49
【问题描述】：

我在使用 Photoswipe 图库时遇到了问题。我遇到的问题是，我单击缩略图，整个页面及其控件以及图像正在加载，然后只显示一个空白页面。

这只发生在我的移动设备 (android 4.0.4) 上，无论是在标准浏览器还是在 chrome 中。但是我笔记本电脑上的 Firefox 和 chrome 都可以正常工作。

我附加了 chrome 远程调试器，一切正常。

在 chrome mobile 上，url-hash 在 android 标准浏览器中更改为 #&ui-state=dialog，桌面版 chrome 和 firefox 中的哈希不会改变并显示为 #pageid。

我尝试调试代码，但无法找出问题所在。

图库标记在pagebeforechange 事件中注入。而Photoswipe初始化如下：

(function(window, $, PhotoSwipe){
    $(document).ready(function(){
        console.log('document ready')

        $('div.gallery-page').live('pageshow', function(e){
            console.log('pageshow');
            var currentPage = $(e.target);
            var options = { enableMouseWheel: false , enableKeyboard: false };                    
            var photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));
            console.log(e.target);

            return true; 
        }).live('pagehide', function(e){

            var currentPage = $(e.target),
                photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

            if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                PhotoSwipe.detatch(photoSwipeInstance);
            }

            return true;
        });
    });

}(window, window.jQuery, window.Code.PhotoSwipe));

知道为什么页面会变成空白，只在移动设备上吗？

//编辑我目前的解决方法是在 pagebeforechange 事件上这样做：

if(window.location.hash.search(/ui-state=dialog/) !== -1 ) {
    console.log('ui-state anomaly');
    e.preventDefault();
}

【问题讨论】：

标签： javascript jquery-mobile jquery-plugins cross-browser

【解决方案1】：

我遇到了同样的问题，并在https://github.com/codecomputerlove/PhotoSwipe/issues/375找到了解决方案

还将您在上面发布的初始代码中的所有“.live”替换为“.on”。确保将“YourGalleryDiv”替换为您自己的 div。

$(document).bind('pagebeforechange', function(e) {
if ($('.ps-carousel').length) {
$('body').removeClass('ps-active');
$('#YourGalleryDiv').each(function(){
    var photoSwipe = window.Code.PhotoSwipe;
    var photoSwipeInstance = photoSwipe.getInstance($(this).attr('id'));
    if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
        photoSwipe.unsetActivateInstance(photoSwipeInstance);
    }
});
}
});

【讨论】：