将图像动态加载到javascript函数中

Question

我使用的是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.elementArray1.imageLink + "'，caption：'Image 001'}

其中this.masterObject.elementArray1.imageLink是图像的URL。

但是..。因为ajax函数需要有限的时间来完成，所以domInjector.output在几秒钟内是空的，并且图像滑动插件没有任何元素！

我剩下的代码都很好，一切工作正常。我只是不知道如何在ajax函数完成后注入更新后的domInjector.output？

对不起，这个问题很难解释。不过，任何帮助都是很好的。

Answer 1

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