상세 페이지 레이지 로딩 구현

public/main.js

@@ -38,14 +38,34 @@ const goToDetailPage = () => {
         .detailPage(url)
         .then((result) => {
           store.setSelectedPage({ selectedPage: result });
-          console.log(store);
           render();
+          useLazyLoading();
         });
       selectedPage = true;
     });
   });
 };
 
+const useLazyLoading = () => {
+  const imgs = document.querySelectorAll('.article-body img');
+
+  const observerCallback = (entries, observer) => {
+    entries.forEach(({ isIntersecting, intersectionRatio, target }) => {
+      console.log(target);
+
+      if (isIntersecting && intersectionRatio > 0) {
+        if (target.dataset.src) {
+          target.src = target.dataset.src;
+        }
+        observer.unobserve(target);
+      }
+    });
+  };
+
+  const io = new IntersectionObserver(observerCallback);
+  imgs.forEach((img) => io.observe(img));
+};
+
 const render = () => {
   const app = document.querySelector('#app');
   app.innerHTML = `

public/src/components/detail.js

@@ -1,11 +1,11 @@
 import store from '../store.js';
 
 const Detail = () => `
+  <div class="article-title">
+    <h2 class="main-title">${store.state.selectedPage.title}</h2>
+    <span class="author">by ${store.state.selectedPage.mediaName}</span>
+  </div>
   <section class="contents-section">
-    <div class="article-title">
-      <h2 class="main-title">${store.state.selectedPage.title}</h2>
-      <span class="author">${store.state.selectedPage.mediaName}</span>
-    </div>
     <article class="article-body">${store.state.selectedPage.mainContents}</article>
   </section>
 `;