สอบถามการใช้งาน loading="lazy" ใน HTML

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

flook
PHP VIP Members
PHP VIP Members
โพสต์: 3751
ลงทะเบียนเมื่อ: 06/06/2022 9:43 am

สอบถามการใช้งาน loading="lazy" ใน HTML

โพสต์ที่ยังไม่ได้อ่าน โดย flook »

ของตัวอย่าง การใช้งาน loading="lazy" ใน tags img และการใช้งานคู่กับ tags vdo โดยอยากให้แสดง ภาพ thumbnail ไว้ ถ้ากด เล่น vdo ค่อยไปที่ vdo
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21911
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอบถามการใช้งาน loading="lazy" ใน HTML

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ในส่วนการ loading="lazy" สามารถดูตัวอย่างได้จาก https://www.w3schools.com/tags/att_img_loading.asp

แต่ตัวนี้ไม่รองรับ Safari นะครับ

หากใช้ jquery อยู่แล้ว อาจจะใช้ library พวก jQuery.Lazy() มาช่วยก็ได้ครับ ดูตัวอย่าง http://jquery.eisbehr.de/lazy/example_basic-usage
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
เลสลี530
PHP Newbie
PHP Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 07/10/2023 3:23 pm
ที่อยู่: Thailand
ติดต่อ:

Re: สอบถามการใช้งาน loading="lazy" ใน HTML

โพสต์ที่ยังไม่ได้อ่าน โดย เลสลี530 »

นี่อาจจะช่วย:
รูปภาพ (อิลิเมนต์ <img>): เมื่อคุณเพิ่ม loading="lazy" ในอิลิเมนต์ <img> มันจะบอกเบราว์เซอร์ให้เลื่อนการโหลดรูปภาพไปจนกระทั่งมันเข้ามาในพอร์ตวิวของผู้ใช้ ซึ่งหมายความว่ามันจะกลายเป็นรูปที่มองเห็นเมื่อผู้ใช้เลื่อนลงมาในหน้าเว็บ สิ่งนี้สามารถช่วยเพิ่มความเร็วในการโหลดหน้าเว็บและประสิทธิภาพโดยรวมของหน้าเว็บ โดยเฉพาะบนหน้าเว็บที่ยาวมากและมีรูปภาพมากมาย

ตัวอย่าง:

html
Copy code
<img src="image.jpg" alt="คำอธิบายของรูปภาพ" loading="lazy">
IFrames (อิลิเมนต์ <iframe>): คุณยังสามารถใช้ loading="lazy" กับอิลิเมนต์ <iframe> เพื่อเลื่อนการโหลดเนื้อหาฝังตัว (เช่น วิดีโอ แผนที่) ไปจนกว่าผู้ใช้จะเลื่อนมายังส่วนนั้นของหน้าเว็บ สิ่งนี้สามารถมีประโยชน์อย่างยิ่งในการเพิ่มความเร็วในการโหลดหน้าเว็บเมื่อคุณมีอิลิเมนต์ <iframe> หลายอันบนหน้าเว็บ

ตัวอย่าง:

html
Copy code
<iframe src="https://www.youtube.com/embed/video_id" loading="lazy"></iframe>
จำไว้ว่าการสนับสนุนโดยเบราว์เซอร์สำหรับ loading="lazy" อาจแตกต่างกันไป ดังนั้นเป็นนิสัยที่ดีที่จะรวมแอตทริบิวต์สำรองเช่น loading="auto" หรือเพียงปล่อยอิลิเมนต์นี้เพื่อให้เหมาะสมกับเบราว์เซอร์ที่ไม่สนับสนุน นี่จะทำให้เนื้อหาของคุณยังคงสามารถเข้าถึงได้สำหรับผู้ใช้ทุกคนไม่ว่าจะเป็นเบราว์เซอร์ที่มีความสามารถอย่างไร
พาสปอร์ตของคุณสู่ความบันเทิงไร้ขอบเขต!
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 50