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

기본적으로 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; 
     } 
    } 
} 

Answer 2

이를 다소 간단합니다. 두 가지 기본 단계가 있습니다.

1. 이미지를 자동으로 표시하는 대신 프로그래밍 방식으로로드하도록 지시 할 수있는 위젯을 만듭니다. 로드 할 이미지의 URL을 저장하고로드 할 메소드가 있습니다. 당신이 실제로 이미지를 표시 얻을 lazyLoad()를 호출해야합니다 제외

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 클래스와 거의 동일한 방식으로 사용할 수 있습니다.

2) ScrollPanel을 사용하여 이미지가 필요할 때 감지합니다.

필자는이 코드를 내 머리 꼭대기에서 완전히 모르지만 이미지의 위치와 스크롤 패널의 스크롤 위치를 비교하는 것이 기본적으로 중요합니다. 스크롤 위치> = 이미지가 스크롤 패널 상단에서 떨어진 거리 인 경우 lazyLoad()으로 전화하면 이미지가 나타납니다.

나는이 코드를 사용해 본 일이 없으며 단지 작동해야만하는 스케치 일뿐입니다. 질문이 있거나 작동하는 경우 의견을 보내주십시오.