Javascript 使用GWT加载惰性图像

Jquery和其他JS框架获得了许多惰性图像加载插件、代码块。当图像在浏览器的可见区域可见时，它基本上会加载图像

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

所以，我想做一些像这样的事情

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

---

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

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.）使用

滚动面板

检测何时需要图像

我不完全确定我头脑中的代码，但它基本上可以归结为比较图像的位置和滚动面板的滚动位置。如果滚动位置>=图像与滚动面板顶部的距离，请调用

lazyLoad（）

，图像将出现

---

我还没有试过这些代码，它只是一些应该工作的东西的草图。如果对你有效/无效，请随时提问或给出反馈。

基本上是Jason的解决方案。除了图像本身决定何时需要加载

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;
        }
    }
}

class LazyImage扩展了图像{
私用线绳；
私人住宅；
私有布尔fLoaded；
公共LazyImage（字符串url，滚动面板父级）{
fUrl=url；
fParent=父母；
attachHandlers（）；
}
私有void attachHandlers（）{
fParent.addScrollHandler（新的ScrollHandler（）{
@凌驾
public void onScroll（滚动事件）{
int imageTop=getAbsoluteTop（）；
int viewport=fParent.getAbsoluteTop（）+fParent.getOffsetSight（）；
如果（图像顶部<视口）{
懒散的负荷（）；
}
}
});
}
@凌驾
公共void setUrl（字符串url）{
fLoaded=假；
fUrl=url；
}
公共空间懒散负荷（）{
如果（！fLoaded）{
super.setUrl（fUrl）；
fLoaded=真；
}
}
}

谢谢，杰森。我感谢你的帮助。当我问你的时候，我已经知道你做了什么。我的意思是这是最简单的部分：）理论上这应该行得通。我实际上还没有试过。。很快就需要解决方案，所以使用jquery lazyload plugin（）。。但是我也会尝试这个…thnx作为答案。我认为你应该在图像加载后删除ScrollHandler。