Question

我正在开发一个jquery移动网站，该网站将有一个由来自Instagram的JSON / AJAX填充的图片库。我可以很好地加载图像，但我想更进一步，使用photoswipe渲染图库。我遇到的问题是，如果我在json Feed中填充ul后添加了对photoswipe的调用，ul实际上没有重绘，那么photoswipe无法找到要使用的任何子元素。以下是我的剧本：

HTML

<div data-role="page" id="Photos">
<div data-role="header">
    <a href="javascript:history.go(-1)" data-icon="back" data-direction="reverse">Back</a>      
    <h1>Photos</h1>
</div>
<div data-role="content">   
    <div id="AdBanner">
    </div>
    <ul id="PhotoList">
    </ul>
</div>
</div>

脚本

$("#Photos").live("pagebeforeshow", function(){
    $("ul#PhotoList").children().remove('li');
    var tag = MyTag
    $.getJSON("https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&amp;client_id=####",
    function(data){
        $.each(data.data, function(i,item){
            $("ul#PhotoList").append('<li><a href="' + item.images.low_resolution.url + ' rel="external"><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="200" /></a></li>');
        });
    });
    var photoSwipeInstance = $("ul#PhotoList a").photoSwipe();
});

有没有办法在调用photoswipe启动器之前刷新ul，还是有另一个我应该用于photoswipe的事件？

Answer 1

我确信这不是这个问题的“正确”答案，但我确实找到了解决方案以获得我想要的功能。我没有使用jquery ul.append来添加列表项，而是使用变量将列表项添加到变量中，然后将UL.innerhtml设置为变量：

var Photos = "";
$.each(data.data, function(i,item){
    Photos += '<li><a href="' + item.images.low_resolution.url + '"><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="80" /></a></li>';
});
document.getElementById('PhotoList').innerHTML = Photos;

同样，我确信这不是正确的方法，但它适用于我，并且在没有更好的解决方案的情况下，它完成了工作。

Answer 2

您是在页面加载之前通过JSON / AJAX 加载图像，还是加载之后加载

如果在页面加载之前，您是否看过用JavaScript加载图像的示例代码，并将其附加到PhotoSwipe实例？

例如。 http://www.photoswipe.com/latest/examples/12-custom-target.html

在动态创建的ul上使用photoswipe

2 个答案: