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检测何时需要图像。

我不能完全确定这个问题的代码，但它基本上归结为比较图像的位置与滚动面板的滚动位置。如果滚动位置＆gt; =图片距离滚动面板顶部的距离，请拨打lazyLoad()并显示图片。

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

使用GWT加载延迟图像

2 个答案: