Javascript 鸟舍编辑器加载空白图像，直到屏幕调整大小

所以我在我的网站上有一个aviary editor的实例，它从filepicker中提取图像，然后重新提交。我遇到的问题是，当我加载图像时，它最初会显示我加载的缩略图，然后屏幕变为空白…直到我调整屏幕大小，图像正常显示

这是它的外观，请注意底部的图像尺寸。它们从已加载的缩略图变为空白图像，并显示正确的尺寸，直到我稍微更改窗口大小

加载时，缩略图的尺寸将显示在底部 加载后，请更正底部的尺寸 稍微更改窗口尺寸后，将显示图像

这是我的初始化代码：

function initEditor( apiKey ){
var tools = ['enhance', 'orientation', 'focus', 'resize', 'crop', 'effects'];
var featherEditor = new Aviary.Feather({
    apiKey: apiKey,
    apiVersion: 3,
    displayImageSize: true,
    tools: tools,
    maxSize: 800,
    theme: 'minimum',
    onSave: function(image, newUrl){
        //onSave function, sends to external filePicker source 
    },
    onError: function(errorObj){
        console.log(errorObj);
    },
    onLoad: function(){
        //load only if there is an img
        if (typeof img !== 'undefined'){
            openEditor(img, src, featherEditor);
        }
    }
});
return featherEditor;
}

开幕代码：

image=“img-id\u image\u-0-image”

src=”https://www.filepicker.io/api/file/mX42P6fLRS6YDP58moIH“

我尝试过的事情：

• 在打开之前将图像加载到div中

• 将羽化初始化简化到最低限度

• 在面向外部的服务器和本地主机上进行测试

---

糟糕的是，当我在JSFIDLE上测试它时，它工作得非常好

它非常脏，但我找到了一个临时解决方案，在加载图像时触发窗口调整事件。我希望有一个更好的答案，但这将在过渡期间起作用

将其添加为初始化中的onReady事件：

onReady: function(){
        //this is an abomination but it works
        window.dispatchEvent(new Event('resize'));
    }

---

同样的问题，我想鸟类专家需要解决这个问题。在此之前，我会尝试你的建议，谢谢！如果这不起作用，请设置超时以分派事件。对我来说，onReady事件是在画布准备就绪之前触发的。

onReady: function(){
        //this is an abomination but it works
        window.dispatchEvent(new Event('resize'));
    }