ช่วยให้คุณโหลดภาพอย่างขี้เกียจด้วยวานิลลา JS

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

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

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

คุณสามารถดูตัวอย่างสดได้ที่หน้าแรกของ Progressively.

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

และตัวยึดตำแหน่งรูปภาพดูเหมือนจริงกับภาพที่คุณกำลังโหลด น่ากลัว!

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

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

แต่คุณสามารถเรียนรู้เพิ่มเติมได้ในหน้าหลักของ GitHub ซึ่งรวมถึงเอกสาร API แบบเต็มคำแนะนำการตั้งค่าและตัวอย่างโค้ดที่คุณสามารถคัดลอก / วางสำหรับโครงการของคุณ.

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

ดูที่ GitHub แบบก้าวหน้าเพื่อเรียนรู้เพิ่มเติมและจับซอร์สโค้ดที่สามารถดาวน์โหลดได้.