将图像动态加载到 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.elementArray[1].imageLink + "', 标题：'Image 001'}

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

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

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

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

Answer 1

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