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

Unable to load actual image sizes on first run using javascript plugin (images are loading after refresh)

本文关键字：图像 加载 刷新 运行时 javascript 插件      更新时间：2023-09-26

我正在使用一个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（）｛，但仍然不起作用。画布的创建和其他操作都是在我使用的插件中完成的。任何帮助都将不胜感激。

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

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

作为参考，这个片段看起来像这样：

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