Canvas 的 GWT 图像加载

发布于 2024-11-04 08:10:23 字数 1077 浏览 1 评论 0原文

在不使用任何图像加载库的情况下，我加载图像如下：

final Image img = new Image();
img.setVisible(false);
RootPanel.get().add(img);
img.addErrorHandler(new ErrorHandler() {
    @Override
    public void onError(ErrorEvent event) {
        System.out.println(event);
    }
});
img.addLoadHandler(new LoadHandler() {
    @Override
    public void onLoad(LoadEvent event) {
        ImageElement data = ImageElement.as(img.getElement());
        RootPanel.get().remove(img);
        obj.setData(data);
        System.out.println("Arrived:" + (System.currentTimeMillis()-startTime) + "ms");
        render();
    }
});

不使用 RootPanel.get().add(img); 图像永远不会被添加到 DOM 中。所以onLoad不会被触发。但是当你将图像添加到 DOM 中时，如果不将其删除，就会出现内存泄漏。

我对上述代码的观察：

如果我不将图像添加到 DOM，则不会触发加载处理程序。
如果我这样做，但加载后不删除，就会发生内存泄漏。
我这样做，并且我确实删除，Chrome 将在 256 MB 后调用垃圾回收。 Firefox 从不调用垃圾回收。于是就发生了内存泄漏。 Firefox 可能会在需要时调用垃圾收集器。这个问题我不太了解。

我的问题是，是否有图像加载程序（库）处理图像加载？
图像加载后，它们会自动从 DOM 中删除图像吗？
是否有更合适的方法来处理您绘制许多图像但绘制后不需要图像的问题？
还有没有快速的方法可以在 DOM 中添加和删除图像？

原文

Without using any image loading library, I am loading images like below:

final Image img = new Image();
img.setVisible(false);
RootPanel.get().add(img);
img.addErrorHandler(new ErrorHandler() {
    @Override
    public void onError(ErrorEvent event) {
        System.out.println(event);
    }
});
img.addLoadHandler(new LoadHandler() {
    @Override
    public void onLoad(LoadEvent event) {
        ImageElement data = ImageElement.as(img.getElement());
        RootPanel.get().remove(img);
        obj.setData(data);
        System.out.println("Arrived:" + (System.currentTimeMillis()-startTime) + "ms");
        render();
    }
});

Without using
RootPanel.get().add(img);
the image will never be added to the DOM. So onLoad will not be triggered.
But when you add the image into the DOM, if you don't remove it, this will be memory leak.

My Observations about the above code:

If I dont add the image to the DOM, load handler will not be triggered.
If I do, but dont remove after loaded, a memory leak will be occured.
I I do, and I do remove, Chrome will call garbage collection after 256 MB.
Firefox never called garbage collection. So a memory leak occured. May be Firefox will call garbage collector when it needs. I dont know this issue so much.

My questions are, are there image loading procedures (libraries) handle image loading?

Do they automatically remove the image from the DOM after the image has loaded?

Is there a more appropriate way to handle this issue where you're drawing many images but does not require the image after drawing?

Also are there fast approaches to add and remove the images to/from the DOM?

分享到QQ

分享到微博