今日やるべきこと/Lazy loading修正

🍊 今日の事

技術発表最終改訂

Lazyロード修正

🍊 今日のアレンジ
🍉 Lazyロードの変更
以前の実装のクリーンアップ
以前のlazy loading実装をクリア
実装の変更
Lazy Loadに関する内容を整理していると、私が実現したLazy Loadに問題があることに気づきました.

debonse遅延イメージロード

還流現象

この2つの問題を発見し,この2つの問題を解決するために交差点オブザーバAPIを通過するLazy loadingを実現した.

  const option = {
    root: null,
    rootMargin: '0px',
    threshold: 0,
  };

  const callback = (entries, observer) => {
    const [entry] = entries;
    if (entry.isIntersecting) {
      let classes = cardRef.current.classList;
      classes.add('imgload');
      if (classes.contains('imgload')) observer.unobserve(cardRef.current);
    }
  };

  useEffect(() => {
    const interObserver = new IntersectionObserver(callback, option);
    if (cardRef.current) interObserver.observe(cardRef.current);

    return () => interObserver.disconnect();
  }, []);

今回の機能実装プロセスにより,特定の機能を実装する際には,計画段階でより多くの時間を費やす必要があることが分かった.
Lazy loading実装に関する様々な手法を早期にまとめ,それぞれの長所と短所を正確に把握すれば,今回のように2回目の作業は行われない.
コード作成前の機能実装では,学習と計画に時間を費やし,実装エラーを減らすことがより重要であるようである.