用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加載惰性圖像

回答

相關問題