ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

Lazy Loading

เวอร์ชัน: 3.7.0

ประเภทของส่วนเสริม: Component

รองรับกับ Joomla: 3.x


  SP Page Builder Pro เป็น Extensions เสริมสำหรับ  Joomla เป็นเครื่องมือที่ใช้สำหรับจัดการเนื้อหาหน้าเว็บไซต์ ซึ่ง SP Page Builder Pro นั้นจะใช้ระบบการสร้างเว็บไซต์แบบ Drag & Drop (คลิ้ก ลาก วาง) หรือ WYSIWYG (What You See Is What You Get) ในปัจจุบัน SP Page Builder Pro ได้มีการอัปเดตเวอร์ชั่นใหม่ เป็นเวอร์ชั่น 3.7.0 โดยได้มีการเพิ่มฟีเจอร์ " Lazy Loading " ที่จะช่วยให้การโหลดหน้าเว็บไซต์เร็วขึ้นกว่าเดิม

 



 

การอัพเดต SP Page Builder Pro เวอร์ชั่น 3.7.0 

  • New: เพิ่มฟีเจอร์ Lazy Load
  • New: Carousel option ในส่วนเสริม Clients
  • New: ตัวกรองรูปภาพและตัวเลือกแบบโฮเวอร์ใน แอดออน ของลูกค้า
  • Update: รูปแบบแผนที่ 2 แบบ (Open Street Black / White, Hike Bike) ถูกลบเนื่องจาก API ไม่ตอบสนองปัญหา
  • Fix: ปัญหาค่าที่ไม่ใช่ตัวเลขในส่วนเสริม Testimonial Carousel
  • Fix: ระยะ ขอบแถว ภายในขอบ: ไม่ทำงานอัตโนมัติกับปัญหาส่วนหน้า

 

Lazy Loading คืออะไร ?

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

   หากเปิดใช้งาน Lazy Loading เนื้อหาทั้งหมด ไม่ว่าจะเป็นรูปภาพหรือวิดีโอที่อยู่ในหน้าเว็บจะไม่สามารถโหลดพร้อมกันได้ ซึ่งหากใช้งาน Lazy Load จะทำการโหลดหน้าเว็บเพียงบางส่วนเท่านั้น และเนื้อหาที่เหลือจะโหลดเมื่อผู้ใช้เลื่อนลงไปถึงเนื้อหา

 

ประเภทของ Lazy Loading ใน SP Page Builder

   ในการอัปเดต SP Page Builder จะมี Lazy Loading 2 ประเภท ประเภทแรกคือ native lazy loading สำหรับผู้ใช้ Chrome จะทำการเลื่อนการโหลดเนื้อหาออกไป จนกว่าผู้ใช้งานจะเลื่อนลงไปที่เนื้อหา และอีกประเภทคือ IntersectionObserver’s สำหรับผู้ที่ไม่ได้ใช้ Chrome

 

วิธีการเปิดใช้งาน Lazy Loading บน Joomla

   เว็บไซต์ที่สร้างโดยใช้ SP Page Builder Pro ตอนนี้สามารถใช้ Lazy Loading ได้ภายในคลิกเดียว โดยผู้ใช้งานสามารถทำการเปิดใช้งาน Lazy Loading จาก Global Configuration ทำการคลิกที่ปุ่ม Options ที่มุมขวาบนในหน้า SP Page Builder panel

 

คลิก Options เพื่อทำการตั้งค่าการใช้งาน Lazy loadingคลิก Options เพื่อทำการตั้งค่า

 

จากนั้นจะเห็นหน้า SP Page Builder Configuration ทำการเปิดการใช้งาน Lazy Loading เมื่อเปิดใช้งานแล้ว จะแสดง ฟิลด์ Placeholder Image ภาพนี้จะถูกใช้ก่อนที่จะทำการโหลดเนื้อหา ควรใช้ไฟล์ภาพที่เบาที่สุดเท่าที่จะเป็นไปได้

ตัวอย่างแสดงขั้นตอนการเปิดใช้งาน Lazy loading
ทำการเปิดใช้งาน Lazy loading

 

Carousel Option ในส่วนเสริม Clients

   นอกจากนี้ ยังมีการเพิ่มฟีเจอร์ Carousel Option ในส่วนเสริม Clients ซึ่งในเวอร์ชั่นนี้สามารถทำ Slide ให้กับ logo ของลูกค้าได้ เพียงทำการเปิดใช้งาน Use As Carousel

ตัวอย่างฟีเจอร์ใหม่ของส่วนเสริม Client
Carousel Option ฟีเจอร์ใหม่ของส่วนเสริม Client

 

   SP Page Builder เป็นตัวช่วยที่ดีในการสร้างเว็บไซต์บน Joomla และในการอัพเดตครั้งนี้ยังมีฟีเจอร์อย่าง Lazy Loading ที่จะเข้ามาช่วยให้หน้าเว็บของโหลดเร็วขึ้นมากกว่าเดิม


Version 3.7.0 2020-02-19

New

  • เพิ่มฟีเจอร์ Lazy Load
  • Carousel option ในส่วนเสริม Clients

Update

  • รูปแบบแผนที่ 2 แบบ (Open Street Black / White, Hike Bike) ถูกลบเนื่องจาก API ไม่ตอบสนองปัญหา

Bug fix

  • ปัญหาค่าที่ไม่ใช่ตัวเลขในส่วนเสริม Testimonial Carousel
  • ระยะ ขอบแถว ภายในขอบ: ไม่ทำงานอัตโนมัติ

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
หนังสือรับรองหักภาษี ณ ที่จ่าย มีความสำคัญอย่างไร
โดย natthanit.r2538 จ 08 มิ.ย. 2020 3:13 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
41
จ 08 มิ.ย. 2020 3:13 pm โดย natthanit.r2538
วิธีการ ทำตาราง ด้วย bootstrap เพื่อความสวยงาม ทำตารางย่อตามหน้าจอได้
โดย bolue จ 08 มิ.ย. 2020 10:56 am บอร์ด Booststap Knowledge
0
69
จ 08 มิ.ย. 2020 10:56 am โดย bolue
ส่วนสำคัญของใบกำกับภาษี
โดย natthanit.r2538 ส 06 มิ.ย. 2020 5:56 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
67
ส 06 มิ.ย. 2020 5:56 pm โดย natthanit.r2538
วิธีการ ไล่สีพื้นหลัง โดย css
โดย bolue ส 06 มิ.ย. 2020 5:03 pm บอร์ด CSS Knowledge
1
73
จ 08 มิ.ย. 2020 1:52 pm โดย LEG
วิธีการสร้าง nav-tabs โดย bootstrap
โดย bolue ส 06 มิ.ย. 2020 4:52 pm บอร์ด Booststap Knowledge
0
76
ส 06 มิ.ย. 2020 4:52 pm โดย bolue
วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript
โดย bolue ส 06 มิ.ย. 2020 4:24 pm บอร์ด Jquery & Ajax Knowledge
0
64
ส 06 มิ.ย. 2020 4:24 pm โดย bolue
กดภาพเล็กๆ ด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ ทำยังไง
โดย bolue ส 06 มิ.ย. 2020 11:20 am บอร์ด JavaScript & Jquery Ajax
2
98
จ 08 มิ.ย. 2020 1:52 pm โดย LEG
Celeb net worth?
โดย Bailey99 ศ 05 มิ.ย. 2020 7:03 pm บอร์ด PHP Knowledge
1
77
ศ 05 มิ.ย. 2020 7:28 pm โดย rajneeskumar
วิธีการ ใช้งาน vuetify คู่กับ vue.js
โดย bolue ศ 05 มิ.ย. 2020 6:02 pm บอร์ด CSS Knowledge
0
39
ศ 05 มิ.ย. 2020 6:02 pm โดย bolue
วิธีการ ติดตั้ง vue.js สำหรับผู้เริ่มต้น หัดเขียน สอนติดตั้ง
โดย bolue ศ 05 มิ.ย. 2020 4:55 pm บอร์ด Jquery & Ajax Knowledge
0
106
ศ 05 มิ.ย. 2020 4:55 pm โดย bolue
วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify
โดย bolue ศ 05 มิ.ย. 2020 3:36 pm บอร์ด CSS Knowledge
0
74
ศ 05 มิ.ย. 2020 3:36 pm โดย bolue
วิธีการ เรียนใช้ dialog จาก components โดย vue.js
โดย bolue ศ 05 มิ.ย. 2020 1:45 pm บอร์ด Jquery & Ajax Knowledge
0
68
ศ 05 มิ.ย. 2020 1:45 pm โดย bolue
วิธีการ การเรียกใช้ methods โดย vue.js
โดย bolue ศ 05 มิ.ย. 2020 1:17 pm บอร์ด Jquery & Ajax Knowledge
0
35
ศ 05 มิ.ย. 2020 1:17 pm โดย bolue
วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js
โดย bolue ศ 05 มิ.ย. 2020 12:45 pm บอร์ด Jquery & Ajax Knowledge
0
30
ศ 05 มิ.ย. 2020 12:45 pm โดย bolue
วิธีการ แสดงผลข้อมูล จากน้อยไปมาก มากไปน้อย โดย Python
โดย bolue ศ 05 มิ.ย. 2020 11:56 am บอร์ด Python Knowledge
0
36
ศ 05 มิ.ย. 2020 11:56 am โดย bolue
วิธีการ ค้นหาแบบช่วงวันที่ โดย Python
โดย bolue ศ 05 มิ.ย. 2020 11:25 am บอร์ด Python Knowledge
0
41
ศ 05 มิ.ย. 2020 11:25 am โดย bolue
กองทุนประกันสังคม มีผู้ประกันตนกี่ประเภท ??
โดย natthanit.r2538 พฤ 04 มิ.ย. 2020 5:53 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
37
พฤ 04 มิ.ย. 2020 5:53 pm โดย natthanit.r2538
วิธีการ ลงเวลา โดย Python
โดย bolue พฤ 04 มิ.ย. 2020 4:09 pm บอร์ด Python Knowledge
0
71
พฤ 04 มิ.ย. 2020 4:09 pm โดย bolue
การยื่นแบบ ภ.ง.ด. 53 ออนไลน์ สอนวิธีการยื่นแบบออนไล์ ทำได้ด้วยตัวเอง
โดย natthanit.r2538 พฤ 04 มิ.ย. 2020 3:51 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
64
พฤ 04 มิ.ย. 2020 4:16 pm โดย natthanit.r2538
วิธีการ โชว์ข้อมูลด้วยการ Format วันที่ โดย Python
โดย bolue พฤ 04 มิ.ย. 2020 3:38 pm บอร์ด Python Knowledge
0
64
พฤ 04 มิ.ย. 2020 3:38 pm โดย bolue