Carga de imágenes diferidas con GWT

Question

Jquery y otros marcos JS tienen muchos complementos de carga de imágenes vagas, bloques de código. Que básicamente carga la imagen cuando es visible en el área visible del navegador.

¿Cómo lograrlo en GWT? Soy consciente de que puedo usar el plugin jquery en GWT, pero estoy buscando una solución GWT nativa.

Por lo tanto, me gustaría hacer algo como esto ..

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

Answer 1

Básicamente la solución de Jason. Excepto que la imagen misma decide cuándo debe cargarse.

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

Esto debe ser algo sencillo. Hay dos pasos básicos.

1.) Cree un widget al que se le pueda indicar que cargue una imagen programáticamente en lugar de mostrarla automáticamente. Almacene la URL de la imagen para cargar y tenga un método para cargarla.

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

Esto puede ser usado de la misma forma que la clase regular Image, excepto que tendrá que llamar lazyLoad() para conseguir realmente que aparezca la imagen.

2.) Detecta cuando la imagen es necesaria usando un ScrollPanel.

No estoy totalmente seguro del código para esto en la parte superior de mi cabeza, pero básicamente se reducirá a comparar la ubicación de la imagen con la posición de desplazamiento del panel de desplazamiento. Si la posición de desplazamiento> = la distancia de la imagen desde la parte superior del panel de desplazamiento, llame al lazyLoad() y aparecerá la imagen.

No he probado nada de este código, es solo un boceto de algo que debería funcionar. Siéntase libre de hacer preguntas o dar su opinión si funciona/no funciona para usted.