กำลังโหลด… แอนิเมชั่นใน JavaScript วานิลลา

บทนำ

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

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

วิธีสร้างตัวโหลด

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

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

เพื่อความเรียบง่ายเรามีเพียงสอง <div> บล็อก – หนึ่งอันสำหรับตัวโหลดและอีกอันสำหรับเนื้อหาของเว็บไซต์

ตามที่ระบุไว้ก่อนหน้านี้ ไอคอนการโหลดสามารถเป็น a GIF, ไอคอนภาพเคลื่อนไหวที่สร้างด้วย CSS หรืออย่างอื่น สิ่งสำคัญที่ต้องจำไว้ก็คือ วิธีการเดียวกันนี้ใช้กับไอคอนการโหลดทุกประเภทที่เราใช้

สร้างตัวโหลดโดยใช้ GIF

A GIF เป็นไอคอนภาพเคลื่อนไหวที่เล่นไปเรื่อย ๆ ครั้งหนึ่ง เราได้สร้างของเรา GIF, เราจะจัดสไตล์ loader-container div ที่จะเก็บมันไว้ มีหลายวิธีในการจัดสไตล์! คุณสามารถสร้างสรรค์ได้ที่นี่ เราจะเพิ่มเลเยอร์ที่มีพื้นหลังสีดำที่ด้านบนของเพจพร้อมกับไอคอน เพื่อ "บล็อก" เนื้อหาที่โหลด:

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

เมื่อเราโหลดหน้าเว็บของเราตอนนี้ เราจะเห็นพื้นหลังสีดำที่มี a GIF กำลังโหลดตรงกลางหน้าจอ คล้ายกับสิ่งนี้:

ณ จุดนี้ เราพร้อมที่จะใช้งานการโหลดโดยใช้ JavaScript แต่มาดูกันว่าเราจะใช้แอนิเมชั่นที่สร้างโดย CSS แทน a . ได้อย่างไร GIFซึ่งไม่ต้องการไฟล์เพิ่มเติมในการนำเข้า

สร้างตัวโหลดโดยใช้ CSS

เราจะสร้างไอคอนเดียวกันกับ CSS อย่าลืมว่าเราได้สร้าง div พิเศษ (spinner) ข้างใน loader-container div และนั่นคือสิ่งที่เราจะใช้เพื่อแสดงไอคอน:

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

โค้ดด้านบนนี้จะช่วยเราสร้าง CSS loader-icon ซึ่งตอนนี้เราสามารถใช้ loader-container div เพื่อจัดกึ่งกลางและเพิ่มพื้นหลังสีดำเหมือนที่เราทำก่อนหน้านี้:

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

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

วิธีการใช้แอนิเมชั่นการโหลดด้วย JavaScript

JavaScript ช่วยให้เราสามารถจัดการโครงสร้าง HTML ของเราและลบหรือซ่อน loader-container ที่กำลังแสดงอยู่ หน้า เนื้อหาของเว็บไซต์ มีสองวิธีหลักในการบรรลุสิ่งนี้ – เพียงแค่ซ่อน loader-containerหรือลบออกทั้งหมด

ไม่ว่าคุณจะเลือกแนวทางใด ขั้นตอนแรกคือใช้ querySelector() or getElementById() เพื่อดึง loader-container เพื่อให้เราสามารถจัดการได้:

const loaderContainer = document.querySelector('.loader-container');

ประการที่สอง เราจะใช้ eventListener เพื่อฟัง load เหตุการณ์เพื่อที่จะเรียกใช้ฟังก์ชันการโทรกลับเมื่อ load เหตุการณ์เกิดขึ้น:

window.addEventListener('load', () => { // ...
});

กำลังซ่อนกำลังโหลด… องค์ประกอบ

วิธีที่พบบ่อยที่สุดคือการซ่อน loader-container กับ display: none เพื่อให้มันหายไปเมื่อเนื้อหาเต็ม

HTML DOM ช่วยให้เราสามารถเปลี่ยนรูปแบบขององค์ประกอบ HTML จาก JavaScript และโค้ดด้านล่างระบุว่าเรากำลังตั้งค่าคอนเทนเนอร์ของตัวโหลด display คุณสมบัติถึง none เพื่อไม่ให้ปรากฏเมื่อ load ประสบความสำเร็จ:

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

อีกทางหนึ่ง คุณสามารถสร้างคลาสแยกซึ่งเก็บ display: none คุณสมบัติ:

.loader-container-hidden { display: none;
}

แล้วใช้ classList.add() เพื่อเพิ่มชั้นเรียนให้กับ loader-container ธาตุ:

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

กำลังลบ กำลังโหลด… องค์ประกอบ

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

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

ณ จุดนี้ เมื่อเราโหลดหน้าของเรา แอนิเมชั่นการโหลดจะแสดงจนกว่าเนื้อหาของหน้าจะโหลดจนเต็ม

การใช้แอนิเมชั่นการโหลดเมื่อขอเนื้อหาภายนอกจาก API

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

ในกรณีของเรา ลองรับใบเสนอราคาจาก a คำพูด API โดยใช้ Fetch API ในตัว โปรดสังเกตว่า HTML ที่เราสร้างไว้ตอนต้นของบทความนี้มี “สร้างใบเสนอราคา” ปุ่ม. สิ่งที่เราต้องทำคือใช้ document.querxySelector() วิธีรับองค์ประกอบและสร้างฟังก์ชันเรียกกลับเพื่อจัดการa click เหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้คลิกปุ่ม:

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

สิ่งนี้จะช่วยเราในการรับใบเสนอราคาแบบสุ่มในใบสมัครของเราได้สำเร็จ แต่เราอยากได้ กำลังโหลดแอนิเมชั่น เพื่อให้ผู้ใช้รู้ว่าเราคาดหวังเนื้อหา เพื่อให้บรรลุสิ่งนี้ เราจะสร้างสองวิธี วิธีหนึ่งเพื่อแสดง loader-container และอื่น ๆ เพื่อซ่อน:

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

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

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

สรุป

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

• คอยน์สมาร์ท การแลกเปลี่ยน Bitcoin และ Crypto ที่ดีที่สุดในยุโรป
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าฟรี
• คริปโตฮอว์ก เรดาร์ Altcoin ทดลองฟรี.
• ที่มา: https://stackabuse.com/loading-animation-in-vanilla-javascript/