所以我的网站上有一个 aviary 编辑器实例,它从 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;
}
打开代码:
图像 =“img-id_image_relations-0-image”
src = "https://www.filepicker.io/api/file/mX42P6fLRS6YDP58moIH"
function openEditor(image, src, editor){
editor.launch({
image: image,
url: src
});
//return false;
}
我尝试过的事情:
在打开之前将图像加载到 div 中,
将羽毛初始化简化到最低限度,
在面向外部的服务器和本地主机上进行测试,
令人讨厌的是,当我在 jsFiddle 上测试它时,它工作得很好。 http://jsfiddle.net/TD4Ud/
最佳答案
这很脏,但我找到了一个临时解决方案,可以在图像加载时触发窗口调整大小事件。我希望有一个更好的答案,但这在过渡期间会起作用。
在初始化中将其添加为 onReady 事件:
onReady: function(){
//this is an abomination but it works
window.dispatchEvent(new Event('resize'));
}
关于javascript - Aviary 编辑器加载空白图像,直到调整屏幕大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24496358/