0

我正在使用 Javascript 照片查看器插件（此处->http://www.photoswipe.com/）。当用户在图像中滑动时，我想动态更新插件附加到的照片。

我有一个 Javascript 对象（我使用 Joose 框架），它负责根据对解析图像元素的 php 脚本的 ajax 调用结果来更新它的属性。

这是我的代码：

<script>
    (function(window, PhotoSwipe){

        domInjector = new DOMInjector();
        domInjector.init();

        document.addEventListener('DOMContentLoaded', function(){

            var options = {
                 preventHide: true,
                 getImageSource: function(obj)
                 {
                    return obj.url;
                 },

                 getImageCaption: function(obj)
                 {
                    return obj.caption;
                 }
            },

            instance = PhotoSwipe.attach(
            [
                domInjector.output
            ], 

            options 

            );

            instance.show(0);

    }, false);


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

domInjector.output 应该是这样的 -> { url: '" + this.masterObject.elementArray[1].imageLink + "', caption: 'Image 001'}

其中 this.masterObject.elementArray[1].imageLink 是图像的 URL。

但是...因为 ajax 函数需要有限的时间才能完成 domInjector.output 为空几秒钟并且图像滑动插件没有元素！

我的其余代码都很好，一切正常。我只是不知道一旦 ajax 函数完成，我怎么能注入更新的 domInjector.output？

对不起，这个很难解释。不过，任何帮助都会很棒。

4

1 回答 1

1

document.DOMContentLoaded我认为，一旦您的 Ajax 调用成功返回，您需要在处理程序中为您从 DOMInjector 类触发的事件执行此操作，而不是在事件处理程序中实例化 PhotoSwipe 插件。您还可以考虑将回调函数作为参数传递给 DOMInjector 类，并在 Ajax 调用返回时执行该函数。无论哪种方式，当您实例化 PhotoSwipe 时，您都可以使用该调用的输出。

于 2012-05-09T23:35:27.520 回答