用GWT加载惰性图像

Jquery和其他JS框架有很多懒惰的图像加载插件，代码块。当它在浏览器的可见区域中可见时，它基本上加载图像。用GWT加载惰性图像

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

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

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

来源

2011-03-03 Nachiket

基本上来自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; 
     } 
    } 
}

来源

2011-03-04 15:43:33 z00bs

理论上这应该工作。没有尝试几乎..解决方案需要很快，所以用jquery lazyload插件（http://www.appelsiini.net/projects/lazyload）..但也会试试这个... thnx的答案。 – Nachiket 2011-03-07 12:30:40

我想你应该在加载图像后删除ScrollHandler。 – confile 2013-12-02 14:21:50

这应该是有点简单。有两个基本步骤。

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()并显示图像。

我还没有尝试过任何此代码，它只是一个应该工作的草图。随时提出问题或提供反馈，如果它工作/不适合你。

来源

2011-03-03 14:38:56

谢谢Jason。我感谢您的帮助。当我问到问题时，我已经知道你做了什么。我的意思是这是容易的部分:) – Nachiket 2011-03-07 12:27:46

用GWT加载惰性图像

回答

相关问题