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（）{用于完整的脚本，但它仍无法正常工作。画布创建和内容在我正在使用的插件内完成。任何帮助都表示赞赏

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,
        });
    });
}

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

1 个答案: