使用GWT加载延迟图像

Question

Jquery和其他JS框架得到了许多懒惰的图像加载插件，代码块。 这基本上在浏览器的可见区域中可见时加载图像。

如何在GWT中实现它？ 我知道我可以在GWT中使用jquery插件，但是寻找本机GWT解决方案。

所以，我想做这样的事情..

LazyImage img = new LazyImage("load.gif","original_thumb.png")
scrollContainer.add(img); //scrollContainer is added to ScrollPanel

Answer 1

基本上来自杰森的解决方案。 除了图像本身决定何时需要加载。

class LazyImage extends Image {

    private String fUrl;
    private ScrollPanel fParent;
    private boolean fLoaded;

    public LazyImage(String url, ScrollPanel parent) {
        fUrl = url;
        fParent = parent;
        attachHandlers();
    }

    private void attachHandlers() {
        fParent.addScrollHandler(new ScrollHandler() {

            @Override
            public void onScroll(ScrollEvent event) {
                int imageTop = getAbsoluteTop();
                int viewport = fParent.getAbsoluteTop() + fParent.getOffsetHeight();
                if (imageTop < viewport) {
                    lazyLoad();
                }
            }
        });
    }

    @Override
    public void setUrl(String url) {
        fLoaded = false;
        fUrl = url;
    }

    public void lazyLoad() {
        if (!fLoaded) {
            super.setUrl(fUrl);
            fLoaded = true;
        }
    }
}

Answer 2

这应该有点直截了当。 有两个基本步骤。

1.）创建一个小部件，可以告诉他以编程方式加载图像而不是自动显示它。 存储要加载的图像的URL并具有加载它的方法。

public class LazyImage extends Image {
  private String url;

  // Override behavior of base Image constructor to just store the URL.
  public LazyImage(String url) {
    this.url = url;
  }

  public void lazyLoad() {
    super.setUrl(url);
  }
}

这可以与常规Image类大致相同的方式使用，除非您需要调用lazyLoad()来实际显示图像。

2.）使用ScrollPanel检测何时需要图像。

我并不完全确定这个问题的代码，但它基本上归结为比较图像的位置和滚动面板的滚动位置。 如果滚动位置> =图像距滚动面板顶部的距离，请调用lazyLoad()并显示图像。

我没有尝试过这些代码，它只是一个应该有用的草图。 如果它有效/不适合您，请随时提出问题或提供反馈。