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

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 的开发人员工具来查看图像何时被下载，仅在需要时才请求它们。

如果您还有其他问题或发现所有图像都在页面加载时下载，请告诉我，我将再次编辑我的答案以帮助您解决问题。