พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน onload Event Attribute

onload เป็น Event Attribute ใน HTML5 ที่จะถูกเรียกใช้เมื่อมีการโหลดองค์ประกอบ (element) นั้น ๆ เสร็จสมบูรณ์ ตัวอย่างเช่น เมื่อโหลดหน้าเว็บเพจทั้งหมด รูปภาพ หรือ iframe เสร็จแล้ว จึงจะมีการเรียกใช้ฟังก์ชันที่กำหนดใน Event Attribute นี้

ลักษณะการใช้งานของ onload ใน HTML5

การใช้งาน onload กับ <body>: เมื่อมีการโหลดหน้าเว็บเพจเสร็จสมบูรณ์ (รวมทั้งองค์ประกอบต่าง ๆ เช่น รูปภาพ, CSS และไฟล์สคริปต์) เราสามารถใช้ onload เพื่อเรียกฟังก์ชันบางอย่าง เช่น แสดงการแจ้งเตือน หรือเรียกข้อมูลเพิ่มเติมจากเซิร์ฟเวอร์

HTML
<html>
<head>
    <title>Example</title>
    <script>
        function pageLoaded() {
            alert("Page has fully loaded!");
        }
    </script>
</head>
<body onload="pageLoaded()">
    <h1>Welcome to the website</h1>
</body>
</html>

ในตัวอย่างนี้ ฟังก์ชัน pageLoaded จะถูกเรียกเมื่อหน้าเว็บทั้งหมดโหลดเสร็จสิ้น

การใช้งาน onload กับรูปภาพ (<img>): เราสามารถใช้ onload เพื่อจัดการกับเหตุการณ์หลังจากที่รูปภาพโหลดเสร็จ เช่น ซ่อน Placeholder แล้วแสดงรูปจริงเมื่อโหลดเสร็จ

HTML
<html>
<head>
    <script>
        function imageLoaded() {
            document.getElementById('placeholder').style.display = 'none';
            document.getElementById('actualImage').style.display = 'block';
        }
    </script>
</head>
<body>
    <img id="placeholder" src="placeholder.jpg" alt="Loading...">
    <img id="actualImage" src="image.jpg" alt="Actual Image" style="display:none;" onload="imageLoaded()">
</body>
</html>

ในตัวอย่างนี้ เมื่อรูปภาพจริง (image.jpg) โหลดเสร็จแล้ว ฟังก์ชัน imageLoaded จะถูกเรียกและทำการซ่อนภาพ placeholder

การใช้งาน onload กับ iframe: onload ยังสามารถใช้กับ iframe เพื่อระบุเหตุการณ์เมื่อ iframe นั้นโหลดหน้าเพจเสร็จเรียบร้อยแล้ว

HTML
<html>
<head>
    <script>
        function iframeLoaded() {
            console.log("Iframe has loaded");
        }
    </script>
</head>
<body>
    <iframe src="https://www.example.com" onload="iframeLoaded()"></iframe>
</body>
</html>

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

การใช้งาน onload กับ JavaScript (Event Listener): นอกจากการใช้งาน onload ใน Attribute ของ HTML แล้ว ยังสามารถใช้ใน JavaScript โดยตรงผ่าน window.onload หรือการใช้ addEventListener ซึ่งจะให้ความยืดหยุ่นมากขึ้น

HTML
<html>
<head>
    <script>
        window.onload = function() {
            alert("Page has fully loaded using JavaScript event listener!");
        };
    </script>
</head>
<body>
    <h1>Using window.onload</h1>
</body>
</html>

หรือการใช้ addEventListener

HTML
<html>
<head>
    <script>
        window.addEventListener('load', function() {
            alert("Page loaded via addEventListener");
        });
    </script>
</head>
<body>
    <h1>Using addEventListener</h1>
</body>
</html>

ตัวอย่างนี้แสดงให้เห็นว่าเราใช้การจัดการ Event โดยตรงผ่าน JavaScript

การประยุกต์ใช้ onload

  • โหลดข้อมูลจากเซิร์ฟเวอร์หลังจากหน้าเว็บโหลดเสร็จ เช่น การทำงานแบบ AJAX
  • การตั้งค่าการเริ่มต้นใน JavaScript หลังจากหน้าเว็บหรือทรัพยากรอื่นโหลดเสร็จ
  • การแสดงผลที่จำเป็นต้องรอการโหลดทรัพยากร เช่น แกลเลอรีภาพ, สไลด์โชว์, หรือวิดีโอ

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

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ