Question

在我的GWT大型项目中，我有一个ClientBundle用于我的图像资源。我在其中定义了大约40个GIF文件。（每个文件的大小约为5KB）

然后我用静态方法创建一个类，将正确的图像设置为obj，作为参数获取：

 public static void setImageFromId (String id,final Image img) {

    //for 1.gif
    if (id.equals("1")) {
        GWT.runAsync(new RunAsyncCallback() {
            @Override
            public void onFailure(Throwable reason) {}
            @Override
            public void onSuccess() {
                img.setResource(MyImages.INSTANCE.img1()); //MyImages is the ClientBundle
            }
        });
    }             

 }

    //for 2.gif
    if (id.equals("2")) {
        GWT.runAsync(new RunAsyncCallback() {
            @Override
            public void onFailure(Throwable reason) {}
            @Override
            public void onSuccess() {
                img.setResource(MyImages.INSTANCE.img2()); //MyImages is the ClientBundle
            }
        });
    }             

   //etc. for other images 3, 4, 5, ...
   //...

 }

我想知道代码分割的好模式吗？因为如果我不这样做，所有40个文件将在第一次调用时缓存到客户端浏览器，但是没有必要。

RGDS

Answer 1

因此，您尝试避免在页面加载时下载每个图像。如果您事先不知道是否需要每张图片，那就太好了。

但是，你的代码正在做的是使用代码分割来仅在需要图像时下载代码以显示图像，正如你所看到的，每个代码只有一行代码图像。

试试这段代码：

if (id.equals("1")) {
  img.setSrc(MyImages.INSTANCE.img1().getUrl());
} else if (id.equals("2")) {
  //.. and so on.
}

只有在需要相关图像时才会下载和显示您的图像。您可以使用Firebug或Chrome's Developer Tools查看图片的下载时间，只应在需要时提出。

如果您有任何其他问题或发现所有图片都是在页面加载时下载的，请与我们联系，我会再次编辑我的回答以帮助您解决问题。

ClientBundle图像资源的GWT代码分割模式

1 个答案: