Question

我正在使用Javascript照片查看器插件（此处为＆gt; 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应该看起来像这样 - ＆gt; {url：'“+ this.masterObject.elementArray [1] .imageLink +”'，标题：'图片001'}

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

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

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

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

Answer 1

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

动态加载图像到javascript函数

1 个答案: