Ленивая загрузка и ScrollIntoView() Angular2 (версия 7)

Я пытаюсь показать компонент при первой загрузке страницы с отложенной загрузкой, которая загружает контент только в том случае, если он находится в представлении. Например: - На странице 10 компонентов, и я хочу показать/прокрутить до компонента номер 7 при первой загрузке с отложенной загрузкой (для производительности).

Как мне это сделать правильно? Проблема здесь в том, что эти компоненты лениво загружаются и имеют огромные изображения, которые испортили scrollIntoView() и слишком много прокручивались до самого верха перед компонентом.

  • Я пробовал эти подходы, но не повезло :(
  • Put a reference to the component 7:
    1. Scroll to that component by scrollIntoView(). Use window.scrollBy(0, -100) for the navigation bar.
    2. Получите компонент offsetTop и используйте window.scrollTo(0, targetComponent.offsetTop - 100);
    3. Оба подхода выше, но с setTimeout от 2 до 5 с тоже не сработали.
    4. Используйте scrollIntoView() для прокрутки до компонента, подождите пару секунд с setTimeout и снова используйте scrollIntoView() с window.scrollBy(0, -100) также не сработало.
    5. Дайте контейнеру изображения фиксированную высоту (например, 500 пикселей), чтобы ленивая загрузка изображений заполнила контейнер, но что, если компонент используется на других страницах, получить изображение большего размера (например, 1200 пикселей) испортит пользовательский интерфейс. .
    6. window.scrollY, window.pageYOffset, getBoundingClientRect().top и эти значения для получения необходимой мне высоты отличаются от кода, сравниваемого с console.log кода и значениями браузера, поэтому мои расчеты неверны.
    7. scrollIntoView({ block: 'start' }) и window.scrollBy(0, -100) тоже не работали. Он также прокручивался сверху и пропускал панель навигации, хотя я использовал window.scrollBy(0, -100). Также попробовал setTimeout с этим.

Что-то вроде этого, что я пробовал, но компонент все еще слишком сильно прокручивается вверх.

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>
<div #target>Target Div 7</div>
<div>Div 8</div>
<div>Div 9</div>
<div>Div 10</div>

export class BBQComponent implements AfterViewInit {
  @ViewChild("target") targetElement: ElementRef;

  ngAfterViewInit() {
    setTimeout(_ => {
     this.targetElement.nativeElement.scrollIntoView({block: "start"});
     window.scrollBy(0, -100);
    }, 2000); 
  }
}

Я ожидаю, что страница покажет компонент при первом посещении чуть ниже панели навигации (около 100 пикселей в высоту). Я искал решения и пробовал разные вещи, но все еще застрял на этом.

Есть ли что-то, что я пропустил, чтобы заставить эту функцию scrollIntoView работать с ленивой загрузкой контента? Спасибо!!


javascript angular lazy-loading angular6 js-scrollintoview
person Mr. Dang    schedule 25.06.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Данг.

Вы должны убедиться в совместимости.

Если вы читаете здесь Doc, обратите внимание на такие опции, как {block : «start»} на самом деле не поддерживается ни одним браузером.

Кстати, я действительно не знаю, связана ли ваша проблема больше с ленивой реализацией загрузки или scrollIntoView. Если речь идет об отложенной загрузке, я настоятельно рекомендую вам использовать отложенную загрузку JQuery, которая избавит вас от головной боли. с его легкой настройкой.

person Sam    schedule 30.06.2019
comment
Привет, Сэм, спасибо за твой ответ. Хорошая мысль об опции {block : start}. Для отложенной загрузки JQuery не является ли плохой практикой использование любого JQuery в приложении Angular? - person Mr. Dang; 01.07.2019

arrow_upward
0
arrow_downward

  • Лучшее решение на данный момент

export class BBQComponent implements AfterContentChecked {
  @ViewChild("target") targetElement: ElementRef;
  scrolled = false; // To avoid multiple scrolls because ngAfterContentChecked

  ngAfterContentChecked() { // Changed from ngAfterViewInit()
    if(!scrolled) {
      const target = this.targetElement.nativeElement;
      target.scrollIntoView({block: "start"}); // Scroll to the component

      // After scrolled, wait for the browser to figure out where the 
      // component is after lazy loading is done. Scroll again.
      setTimeout(_ => {
       target.scrollIntoView({block: "start"});
       window.scrollBy(0, -100); // Nav's height
       this.scrolled = true;
      }, 1000); // Adjust wait time as needed
    }
  }
}
person Mr. Dang    schedule 30.06.2019