Question

更新：尝试了以下答案中的所有内容，但没有帮助。

我有一个Flask应用程序，在模板中我正在运行一些JQuery。 JQuery在页面加载时引入Aviary editor ..或它应该是。由于某种原因，JQuery没有以正确的顺序运行，因为编辑器只有在我向JQuery函数添加一个人工延迟时才有效。例如，这不起作用：

<script type='text/javascript'>
    id = "image";

   var featherEditor = new Aviary.Feather({
       apiKey: 'my_api_key',
       apiVersion: 3,
       theme: 'minimum', // Check out our new 'light' and 'dark' themes!
       tools: 'all',
       noCloseButton: true,
       appendTo: 'result-image',
       onSave: function(imageID, newURL) {
            //this code was removed for brevity
       },
       onError: function(errorObj) {
           alert(errorObj.message);
       }
   });
       function launchEditor(id) {
           featherEditor.launch({
               image: id
           });
          return false;
        }
    $(document).ready(function() {
           launchEditor(id);
    });
</script>

但是下面的代码工作正常。延迟用完后，编辑器启动：

<script type='text/javascript'>
    id = "image";

   var featherEditor = new Aviary.Feather({
       apiKey: 'my_api_key',
       apiVersion: 3,
       theme: 'minimum', // Check out our new 'light' and 'dark' themes!
       tools: 'all',
       noCloseButton: true,
       appendTo: 'result-image',
       onSave: function(imageID, newURL) {
            //this code was removed for brevity
       },
       onError: function(errorObj) {
           alert(errorObj.message);
       }
   });
       function launchEditor(id) {
           featherEditor.launch({
               image: id
           });
          return false;
        }
  $(document).ready(function() {
            setTimeout(
                           function() 
                           { 
                                    launchEditor(id);
                           }, 3500);

   });
</script>

我尝试使用（window）.load（），将javascript从页眉移动到页脚和其他一些东西。使编辑器正确加载的唯一方法是在函数调用中添加几秒钟的延迟。

现在，虽然这对测试来说很好，但这并不十分有利于用户体验。我想弄清楚为什么函数在页面加载完毕后几秒钟才能正常工作。

任何建议表示赞赏！谢谢

Answer 1

我猜你的图片还没有加载，这就是为什么它不能立即在页面加载时工作。在打开编辑器之前尝试检查图像是否已加载，可能是这样的：

$(document).ready(function () {
    $(id).one('load', function () {
        launchEditor($(this).attr('id'));
    }).each(function () {
        if (this.complete) $(this).load();
    });
});

从here

借来的图片加载检查

Flask app和JQuery没有正确加载

1 个答案: