การสร้างตัวบ่งชี้กิจกรรมหมุนใน JavaScript ด้วย jQuery

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

ความจำเป็นของตัวบ่งชี้กิจกรรม

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

ตัวบ่งชี้กิจกรรมหมุนคืออะไร?

ตัวบ่งชี้กิจกรรมหมุนมักเรียกว่าเป็น ตัวบ่งชี้กิจกรรม Ajax ซึ่งหมายความว่ามันแสดงถึงกระบวนการเบื้องหลังหรือการเรียก Ajax ผู้ใช้อาจเคยพบเห็นพวกมันในแอปพลิเคชันหลาย ๆ แห่ง เช่น:

• การโหลดแท็บใหม่ในเว็บเบราว์เซอร์ เช่น Firefox
• หน้าจอเริ่มต้นในระบบปฏิบัติการ เช่น macOS
• แอปพลิเคชันเว็บต่าง ๆ เมื่อพวกเขากำลังรอข้อมูล

วิธีสร้างตัวบ่งชี้กิจกรรมหมุน

ขั้นตอนที่ 1: หาไฟล์ภาพของสปินเนอร์คุณ

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

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

ขั้นตอนที่ 2: เตรียมโครงสร้าง HTML ของคุณ

รวมภาพสปินเนอร์ใน HTML ของคุณที่คุณต้องการให้แสดง เช่น คุณสามารถวางมันใน <div> ภายในตารางหรือตั้งเป็นส่วนประกอบเดี่ยว:

<div id="spinner" style="display: none;">
    <img src="path_to_your_spinner_image.gif" alt="กำลังโหลด..." />
</div>

ขั้นตอนที่ 3: ใช้ jQuery เพื่อเปิดหรือปิดการมองเห็น

ตอนนี้ที่คุณได้ตั้งค่า HTML ของคุณแล้ว คุณสามารถใช้ jQuery เพื่อแสดงหรือซ่อนสปินเนอร์เมื่อเริ่มต้นหรืองานเสร็จสิ้น นี่คือวิธีการง่าย ๆ ในการทำดังกล่าว:

$(document).ready(function() {
    $("#yourButton").click(function() {
        $("#spinner").show(); // แสดงสปินเนอร์เมื่อปุ่มถูกคลิก
        
        // จำลองงานที่ใช้เวลานานด้วย setTimeout
        setTimeout(function() {
            $("#spinner").hide(); // ซ่อนสปินเนอร์หลังจากงานเสร็จสิ้น
        }, 3000); // ปรับระยะเวลาได้ตามต้องการ
    });
});

คำอธิบายของโค้ด:

• แสดงสปินเนอร์: เมื่อการกระทำเฉพาะเกิดขึ้น (เช่น การคลิกปุ่ม) การมองเห็นของสปินเนอร์จะถูกเปลี่ยนเป็นการแสดง
• จำลองงาน: เพื่อวัตถุประสงค์ในการสาธิต ฟังก์ชัน setTimeout จำลองงานที่ใช้เวลานาน ในทางปฏิบัติ นี่จะเป็นที่ที่การเรียก Ajax ของคุณเกิดขึ้น
• ซ่อนสปินเนอร์: เมื่องานเสร็จสิ้น สปินเนอร์ก็จะถูกซ่อนอีกครั้ง

สรุป

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

อย่าลังเลที่จะทดลองกับดีไซน์สปินเนอร์ที่แตกต่างกันและรวมพวกมันเข้ากับโปรเจกต์เว็บของคุณ ขอให้สนุกกับการเขียนโค้ด!