วิธีการใช้ Infinite Scroll ในเว็บแอปพลิเคชัน

Leonard Strauss included in Programming Web Development Javascript Html Css

2023-11-09 581 words 3 minutes

Contents

การเลื่อนแบบไม่มีที่สิ้นสุดช่วยให้สามารถโหลดเนื้อหาได้อย่างต่อเนื่องในขณะที่ผู้ใช้เลื่อนหน้าลงมา ซึ่งแตกต่างจากวิธีการคลิกเพื่อโหลดของการแบ่งหน้าแบบดั้งเดิม ฟีเจอร์นี้สามารถมอบประสบการณ์ที่ราบรื่นยิ่งขึ้น โดยเฉพาะบนอุปกรณ์มือถือ

สำรวจกระบวนการปรับใช้อินเทอร์เฟซแบบเลื่อนได้ไม่จำกัดโดยใช้ HTML พื้นฐาน, CSS สไตล์ และเทคนิค JavaScript อเนกประสงค์

การตั้งค่าส่วนหน้า

ใช้กรอบงาน HTML พื้นฐานเพื่อแสดงเนื้อหาของคุณ ตัวอย่างมีดังนี้:

 <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h1>Infinite Scroll Page</h1>

    <div class="products__list">
      <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
           alt="Jacket" />

      <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
           alt="Jacket" />

      <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
           alt="Jacket" />

      <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
           alt="Jacket" />

      <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
           alt="Jacket" />

      <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
           alt="Jacket" />
    </div>

    <script src="script.js"></script>
</body>
</html>

ไฟล์ Cascading Style Sheets (CSS) และไฟล์ JavaScript (JS)

การจัดสไตล์ CSS สำหรับเนื้อหาที่เลื่อนได้

หากต้องการนำเสนอกราฟิกตัวยึดตำแหน่งในรูปแบบตาราง ให้รวมกฎสไตล์ต่อไปนี้ไว้ในไฟล์ “style.css” ของคุณ:

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
  font-family: Cambria, Times, "Times New Roman", serif;
}

h1 {
  text-align: center;
  font-size: 5rem;
  padding: 2rem;
}

img {
  width: 100%;
  display: block;
}

.products__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.products__list > * {
  width: calc(33%-2rem);
}

.loading-indicator {
  display: none;
  position: absolute;
  bottom: 30px;
  left: 50%;
  background: #333;
  padding: 1rem 2rem;
  color: #fff;
  border-radius: 10px;
  transform: translateX(-50%);
}

ในปัจจุบัน ลักษณะที่ปรากฏของหน้าเว็บของคุณควรมีลักษณะคล้ายกับเค้าโครงและการออกแบบที่ให้ไว้ด้านล่าง:

การใช้งานหลักด้วย JS

เพื่อรวมฟังก์ชันการเลื่อนแบบไม่มีที่สิ้นสุดไว้ในเว็บแอปพลิเคชันของคุณอย่างมีประสิทธิภาพ การตรวจสอบความใกล้ชิดของผู้ใช้ไปยังฐานของพื้นที่เนื้อหาหรือหน้าเว็บทั้งหมดเป็นสิ่งสำคัญ ซึ่งสามารถทำได้โดยใช้ JavaScript และ CSS เพื่อสังเกตตำแหน่งของเหตุการณ์การเลื่อนที่สัมพันธ์กับความสูงของวิวพอร์ต และทริกเกอร์การดำเนินการที่เหมาะสมตามนั้น

 "use strict";

window.addEventListener("scroll", () => {
  if (
    window.scrollY \+ window.innerHeight >=
      document.documentElement.scrollHeight-100
  ) {
    // User is near the bottom, fetch more content
    fetchMoreContent();
  }
});

ในการเริ่มต้น เราจะพัฒนาฟังก์ชันที่ดึงข้อมูลตัวยึดตำแหน่งเพิ่มเติม ซึ่งสามารถทำได้โดยการใช้การเรียก API หรือใช้การสืบค้นฐานข้อมูล ขึ้นอยู่กับข้อกำหนดเฉพาะของแอปพลิเคชันของคุณ ข้อมูลที่ดึงมาจะถูกใช้เป็นอินพุตสำหรับการประมวลผลเพิ่มเติมและแสดงภายในอินเทอร์เฟซผู้ใช้

 async function fetchMoreContent() {
  try {
    let response = await fetch("https://fakestoreapi.com/products?limit=3");

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("There was a problem fetching new content:", error);
  } finally {
    console.log("Fetch function fired");
  }
}

สำหรับโปรเจ็กต์นี้ คุณสามารถใช้ API จาก fakestoreapi

เพื่อตรวจสอบว่าข้อมูลของคุณถูกดึงมาในขณะที่คุณเลื่อนดูหน้าต่างๆ ขอแนะนำให้ตรวจสอบคอนโซลนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์เพื่อดูผลลัพธ์หรือข้อบ่งชี้ความสำเร็จในการดึงข้อมูล ข้อมูลนี้สามารถให้ข้อมูลเชิงลึกที่เป็นประโยชน์และข้อเสนอแนะเกี่ยวกับการทำงานของสคริปต์

เพื่อบรรเทาปัญหาด้านประสิทธิภาพที่อาจเกิดขึ้นจากการดึงข้อมูลซ้ำๆ ขณะเลื่อน ขอแนะนำให้สร้างสถานะการโหลดเริ่มต้นสำหรับข้อมูล เพื่อให้มั่นใจว่าการทำงานของอุปกรณ์มีประสิทธิภาพ

 let isFetching = false;

เพื่อให้แน่ใจว่าการดึงข้อมูลดำเนินการอย่างมีประสิทธิภาพ จำเป็นต้องแก้ไขการใช้งานฟังก์ชัน ดึงข้อมูล เพื่อดำเนินการดึงข้อมูลต่อเมื่อฟังก์ชันรุ่นก่อนเสร็จสมบูรณ์เท่านั้น ซึ่งสามารถทำได้โดยการแนะนำตรรกะเพิ่มเติมภายในโค้ดเพื่อตรวจสอบและจัดการโฟลว์การดำเนินการของคำขอหลายรายการพร้อมกัน ดังนั้นจึงป้องกันปัญหาคอขวดหรือความล่าช้าที่อาจเกิดขึ้นเนื่องจากการดำเนินการพร้อมกันบนทรัพยากรที่ใช้ร่วมกัน

 async function fetchMoreContent() {
  if (isFetching) return; // Exit if already fetching

  isFetching = true; // Set the flag to true

  try {
    let response = await fetch("https://fakestoreapi.com/products?limit=3");

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    let data = await response.json();
  } catch (error) {
    console.error("There was a problem fetching new content:", error);
  } finally {
    console.log("Fetch function fired");
    isFetching = false; // Reset the flag to false
  }
}

การแสดงเนื้อหาใหม่

หากต้องการอัปเดตการแสดงภาพฟีดข่าวแบบไดนามิกในขณะที่ผู้ใช้เลื่อนดู แนวทางหนึ่งคือการกำหนดฟังก์ชันที่แก้ไของค์ประกอบหลักที่มีรายการซึ่งเป็นตัวแทนของแต่ละโพสต์ในฟีด ซึ่งสามารถทำได้โดยการต่อท้ายองค์ประกอบรูปภาพใหม่ลงในคอนเทนเนอร์นี้ในขณะที่ผู้ใช้เลื่อนหน้าลงไปอีก และปรับปรุงส่วนที่แสดงของฟีดด้วยโพสต์ที่ใหม่กว่าอย่างมีประสิทธิภาพ

ขั้นแรก ให้เลือกองค์ประกอบหลัก:

 const productsList = document.querySelector(".products__list");

จากนั้นสร้างฟังก์ชันเพื่อผนวกเนื้อหา

 function displayNewContent(data) {
  data.forEach((item) => {
    const imgElement = document.createElement("img");
    imgElement.src = item.image;
    imgElement.alt = item.title;
    productsList.appendChild(imgElement); // Append to productsList container
  });
}

โดยสรุป จำเป็นต้องแก้ไขฟังก์ชัน fetch และส่งต่อข้อมูลที่ดึงมาไปยังเมธอด append

 async function fetchMoreContent() {
  if (isFetching) return;

  isFetching = true;

  try {
    let response = await fetch("https://fakestoreapi.com/products?limit=3");

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    let data = await response.json();
    displayNewContent(data);
  } catch (error) {
    console.error("There was a problem fetching new content:", error);
  } finally {
    console.log("Fetch function fired");
    isFetching = false;
  }
}

อันที่จริง การใช้งานฟังก์ชันการเลื่อนแบบไม่มีที่สิ้นสุดได้รับการบูรณาการเรียบร้อยแล้ว ซึ่งช่วยให้สามารถนำทางได้อย่างราบรื่นผ่านเนื้อหาที่ดูเหมือนไม่มีที่สิ้นสุดเมื่อดำเนินไปในหน้าเว็บ

การปรับปรุงการเลื่อนที่ไม่มีที่สิ้นสุด

เพื่อปรับปรุงประสบการณ์ของผู้ใช้ ขอแนะนำให้แสดงตัวบ่งชี้การโหลดในขณะที่ดึงเนื้อหาใหม่ ซึ่งสามารถทำได้โดยการรวมโค้ด HTML ต่อไปนี้

 <h1 class="loading-indicator">Loading...</h1>

จากนั้นเลือกองค์ประกอบการโหลด

 const loadingIndicator = document.querySelector(".loading-indicator");

โดยสรุป ใช้งานสองฟังก์ชันที่ควบคุมสถานะการแสดงผลของตัวบ่งชี้การโหลดโดยใช้ JavaScript

 function showLoadingIndicator() {
  loadingIndicator.style.display = "block";
  console.log("Loading...");
}

function hideLoadingIndicator() {
  loadingIndicator.style.display = "none";
  console.log("Finished loading.");
}

จากนั้นเพิ่มลงในฟังก์ชันการดึงข้อมูล

 async function fetchMoreContent() {
  if (isFetching) return; // Exit if already fetching

  isFetching = true;
  showLoadingIndicator(); // Show loader

  try {
    let response = await fetch("https://fakestoreapi.com/products?limit=3");

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    let data = await response.json();
    displayNewContent(data);
  } catch (error) {
    console.error("There was a problem fetching new content:", error);
  } finally {
    console.log("Fetch function fired");
    hideLoadingIndicator(); // Hide loader
    isFetching = false;
 }
}

ซึ่งจะช่วยให้:

เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ

แนวทางปฏิบัติที่ดีสำหรับ Infinite Scroll

แนวทางปฏิบัติที่ดีที่สุดที่ควรปฏิบัติตาม ได้แก่:

ขอแนะนำให้หลีกเลี่ยงการร้องขอรายการมากเกินไปในคราวเดียว เนื่องจากอาจทำให้เบราว์เซอร์ค้างและทำให้ประสิทธิภาพโดยรวมลดลง

เพื่อบรรเทาปัญหาคำขอเครือข่ายบ่อยครั้งที่เกิดจากการดึงเนื้อหาทันทีเมื่อตรวจพบเหตุการณ์การเลื่อน วิธีหนึ่งคือการใช้กลไกการดีเด้ง เมื่อใช้เทคนิคนี้ การดำเนินการดึงเนื้อหาจะล่าช้าไปช่วงระยะเวลาหนึ่งหลังจากเหตุการณ์การเลื่อนเกิดขึ้น เป็นผลให้ช่วยลดจำนวนคำขอเครือข่ายที่ไม่จำเป็นและปรับปรุงประสิทธิภาพโดยรวม

แม้ว่าผู้ใช้บางคนอาจชื่นชอบความสะดวกสบายของการเลื่อนแบบไม่มีที่สิ้นสุด แต่สิ่งสำคัญคือต้องตระหนักว่าไม่ใช่ทุกคนจะแชร์การตั้งค่านี้ การจัดหาตัวเลือกอื่นในรูปแบบขององค์ประกอบการแบ่งหน้าจะเป็นประโยชน์สำหรับผู้ที่พบว่ามีประสิทธิภาพมากกว่าหรือใช้งานง่ายกว่า ท้ายที่สุดแล้ว การนำเสนอทั้งสองตัวเลือกทำให้แต่ละบุคคลสามารถปรับแต่งประสบการณ์การท่องเว็บได้ตามความต้องการและความชอบส่วนบุคคล

การแจ้งเตือนผู้ใช้เมื่อไม่มีเนื้อหาเพิ่มเติมที่จะโหลดจะเหมาะสมกว่า แทนที่จะพยายามดึงข้อมูลเพิ่มเติมซ้ำๆ

การเรียนรู้การโหลดเนื้อหาที่ไร้รอยต่อ

การผสมผสานการเลื่อนแบบไม่มีที่สิ้นสุดในการออกแบบเว็บไซต์มอบประสบการณ์ผู้ใช้ที่ราบรื่นโดยเฉพาะบนอุปกรณ์มือถือ ซึ่งกำลังแพร่หลายมากขึ้นในโลกดิจิทัลในปัจจุบัน โดยการปฏิบัติตามหลักเกณฑ์ที่ให้ไว้ในบทความนี้ นักพัฒนาสามารถรวมฟังก์ชันการทำงานนี้เข้ากับโครงการเว็บของตนได้อย่างมีประสิทธิภาพ

เมื่อออกแบบเว็บไซต์ สิ่งสำคัญคือต้องคำนึงถึงอารมณ์ของผู้ใช้ที่จะโต้ตอบด้วย เพื่ออำนวยความสะดวกให้กับประสบการณ์เชิงบวก แสดงตัวบ่งชี้ความคืบหน้าและแสดงข้อความแสดงข้อผิดพลาดที่ชัดเจนซึ่งแจ้งให้ผู้ใช้ทราบถึงปัญหาใดๆ ที่อาจเกิดขึ้นระหว่างการโต้ตอบกับไซต์