无法使用 javascript 插件在第一个 运行 上加载实际图像大小（图像在刷新后加载）

Question

我正在使用 javascript 插件 http://flipbit.co.uk/2009/03/jquery-image-annotation-plugin.html 来注释图像。我无法在第一个 运行 上以准确的尺寸加载我的图像，但是当我刷新页面时它可以工作。当我尝试在下面的代码中的函数内部执行 window.onload 时，它会加载图像但删除注释。

<script type="text/javascript">
       $(document).ready(function() {
        $.ajax({
          url.....

      success:function(data){

       //adding data to div 
      $("#imgID").append($("<img src="" id="" />"));

       //then calling this method
 function annotateAllImages(id) {
 $(window).load(function() {
    $("#"+id).annotateImage({
        getUrl: id+'/getAnnotationData',
        saveUrl: id+'/saveData',
        deleteUrl: id+'/deleteData',
        editable: true,
        useAjax: true,
                });
           });
        }
</script>

我尝试为完整的脚本执行 $(window).load(function() { 但它仍然无法正常工作。canvas 创建和其他东西是在我的插件中完成的正在使用。感谢任何帮助。

Answer 1

这个问题可以通过在 $.load 函数中对每个图像单独应用所有图像编辑来解决。

这是因为每个元素的源标记在 ajax 调用后动态设置，因此每个图像异步需要更多时间。

作为参考，代码段如下所示：

function annotateAllImages(id) {
    $("#"+id).load(function(){
        $(this).annotateImage({
            getUrl: id+'/getAnnotationData',
            saveUrl: id+'/saveData',
            deleteUrl: id+'/deleteData',
            editable: true,
            useAjax: true,
        });
    });
}