Ленивая загрузка изображений с GWT - PullRequest
Новая
       18

Ленивая загрузка изображений с GWT

6 голосов
/ 03 марта 2011

Jquery и другие JS-фреймворки получили множество ленивых плагинов для загрузки изображений, кодовых блоков. Который в основном загружает изображение, когда оно видно в видимой области браузера.

Как этого добиться в GWT? Я знаю, что могу использовать плагин jquery в GWT, но ищу нативное решение GWT.

Итак, я хотел бы сделать что-то вроде этого .. 

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

Ответы [ 2 ]

3 голосов
/ 04 марта 2011

В основном решение от Джейсона.За исключением того, что само изображение решает, когда оно должно быть загружено. 

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;
        }
    }
}
1 голос
/ 03 марта 2011

Это должно быть несколько просто.Есть два основных шага.

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(), и изображение появится.

Я не пробовал ни один из этого кода, это всего лишь набросок чего-тоэто должно работать.Не стесняйтесь задавать вопросы или оставлять отзывы, если это работает / не работает для вас.

...