react cool img
v1.2.12
นี่คือส่วนประกอบ React ที่มีน้ำหนักเบา <Img /> ซึ่งช่วยให้คุณจัดการกับภาพ UX (ประสบการณ์ผู้ใช้) และการเพิ่มประสิทธิภาพประสิทธิภาพในฐานะมืออาชีพ?
มันให้อำนาจแท็ก img มาตรฐานโดยคุณสมบัติที่ยอดเยี่ยมมากมายโดยไม่ทำลายประสบการณ์การพัฒนาดั้งเดิมของคุณ ตามหลักการแล้วมันอาจเป็นการแทนที่แท็ก img สำหรับ React.js
⚡การสาธิตสด: https://react-cool-img.netlify.app
❤มัน️มันบน gitHub หรือทวีตเกี่ยวกับมัน
ตัวยึดสถานที่เพื่อสร้างความพึงพอใจสถานะการโหลดภาพต่างๆ (เช่นการโหลดภาพ> ภาพจริง> ภาพข้อผิดพลาด)
Smart Lazy Loading ด้วยวิธีที่มีประสิทธิภาพและมีประสิทธิภาพโดยใช้ผู้สังเกตการณ์สี่แยก
กลไกการเรียนรู้อัตโนมัติในตัว ผู้ใช้จะไม่พลาดข้อมูลสำคัญของคุณ
ยกเลิกการดาวน์โหลดรูปภาพปัจจุบันบนส่วนประกอบ unmount อาจช่วยประหยัดแบนด์วิดท์และทรัพยากรเบราว์เซอร์
รองรับการแสดงผลด้านเซิร์ฟเวอร์ / JavaScript ถูกปิดใช้งาน / SEO
รองรับคำจำกัดความประเภท TypeScript
ขนาดเล็ก (~ 2KB gzipped) ไม่มีการพึ่งพาภายนอกนอกเหนือจาก react และ react-dom
ใช้งานง่าย
เบราว์เซอร์ที่ทันสมัยส่วนใหญ่รองรับผู้สังเกตการณ์สี่แยก คุณยังสามารถเพิ่มโพลีฟิลสำหรับรองรับเบราว์เซอร์เต็มรูปแบบ
react-cool-img ขึ้นอยู่กับการตอบสนองของตะขอ มันต้องใช้ react v16.8+
แพ็คเกจนี้แจกจ่ายผ่าน NPM
$ เส้นด้ายเพิ่ม React-Cool-Img# หรือ $ NPM Install-Save React-Cool-Img
อุปกรณ์ประกอบฉากเริ่มต้นของส่วนประกอบได้รับการปรับแต่งเพื่อจุดประสงค์ในการโหลดการเพิ่มประสิทธิภาพ มาเริ่มกันเป็นตัวอย่างต่อไปนี้
นำเข้า IMG จาก "React-cool-img"; // แนะนำให้ใช้ภาพคุณภาพต่ำหรือ vector imagesimport loadingimage จาก "./images/loading.gif"; ) => (
<imgplaceholder = {loadingImage} src = "https: // the-image-url" error = {errorImage} alt = "React Cool IMG"
- ไม่ต้องการตัวยึดภาพ? ไม่ต้องกังวลคุณสามารถใช้สไตล์อินไลน์หรือ CSS สำหรับมัน ส่วนประกอบเข้ากันได้อย่างสมบูรณ์กับประสบการณ์การพัฒนาของแท็ก img ปกติ
นำเข้า IMG จาก "React-Cool-Img"; const app = () => (
<imgstyle = {{backgroundColor: "สีเทา", ความกว้าง: "480", ความสูง: "320"}} src = "https: // the-image-url" Alt = "React Cool IMG"
- ส่วนประกอบของภาพทำงานคล้ายกับแท็ก img มาตรฐานและด้วยอุปกรณ์ประกอบฉากต่อไปนี้
| ข้อต่อ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
src | สาย | แหล่งที่มาของภาพ requiredสนับสนุนรูปแบบ | |
srcSet | สาย | แหล่งที่มาของภาพสำหรับภาพที่ตอบสนอง สำหรับ src prop เท่านั้นบทความอ้างอิง | |
sizes | สาย | ขนาดภาพสำหรับภาพที่ตอบสนอง สำหรับ src prop เท่านั้นบทความอ้างอิง | |
width | สาย | ความกว้างของภาพใน PX | |
height | สาย | ความสูงของภาพใน PX | |
placeholder | สาย | แหล่งที่มาของภาพสถานที่ สนับสนุนรูปแบบ | |
error | สาย | แหล่งที่มาของภาพข้อผิดพลาด มันจะแทนที่ภาพตัวยึด สนับสนุนรูปแบบ | |
alt | สาย | ข้อความสำรองสำหรับส่วนรูปภาพ | |
decode | บูลีน | true | ใช้ img.decode () เพื่อ decod pre-decod image ก่อนที่จะแสดงผล มีประโยชน์ในการป้องกันเธรดหลักจากการปิดกั้นโดยการถอดรหัสภาพขนาดใหญ่ |
lazy | บูลีน | true | เปิด/ปิดการโหลดขี้เกียจ ใช้ผู้สังเกตการณ์สี่แยก |
cache | บูลีน | true | โหลดภาพที่ถูกแคชทันทีที่เป็นไปได้ที่จะยกเลิกพฤติกรรมการโหลดขี้เกียจ บทความอ้างอิง |
debounce | ตัวเลข | 300 | ต้องรอมากแค่ไหนในมิลลิวินาทีว่าภาพจะต้องอยู่ในวิวพอร์ตก่อนที่จะเริ่มโหลด สิ่งนี้สามารถป้องกันไม่ให้ภาพถูกดาวน์โหลดในขณะที่ผู้ใช้เลื่อนผ่านไปอย่างรวดเร็ว |
observerOptions | วัตถุ | { root: window, rootMargin: '50px', threshold: 0.01 } | ดูส่วน ObserverOptions |
retry | วัตถุ | { count: 3, delay: 2, acc: '*' } | ดูส่วนการลองใหม่ |
... | ค้นหาอุปกรณ์ประกอบฉากและกิจกรรมเพิ่มเติม |
คุณสมบัติทั้งหมดเป็น optional
root: Element | null - องค์ประกอบที่ใช้เป็น Viewport สำหรับการตรวจสอบการมองเห็นของเป้าหมาย ต้องเป็นบรรพบุรุษของเป้าหมาย ค่าเริ่มต้นไปยัง Viewport เบราว์เซอร์หากไม่ได้ระบุหรือเป็น null
rootMargin: string - Margin รอบรูท สามารถมีค่าที่คล้ายกับคุณสมบัติมาร์จิ้น CSS เช่น "10px 20px 30px 40px" (ด้านบนขวาด้านล่างซ้าย) ค่าสามารถเป็นเปอร์เซ็นต์ ชุดของค่านี้ทำหน้าที่เติบโตหรือหดตัวแต่ละด้านของกล่องขอบเขตขององค์ประกอบรูทก่อนคำนวณทางแยก
threshold: number - หมายเลขเดียวระหว่าง 0 ถึง 1 ซึ่งระบุว่าควรดำเนินการว่าการโทรกลับของผู้สังเกตการณ์ควรดำเนินการในอัตราร้อยละของการมองเห็นของผู้สังเกตการณ์ ค่า 0 หมายถึงทันทีที่มองเห็นพิกเซลหนึ่งพิกเซลการโทรกลับจะถูกเรียกใช้ 1 หมายความว่าเกณฑ์จะไม่ถูกพิจารณาว่าผ่านไปจนกว่าทุกพิกเซลจะมองเห็นได้
คุณสมบัติทั้งหมดเป็น optional
count: number - ระบุจำนวนครั้งที่คุณต้องการลองอีกครั้ง ตั้งค่าเป็น 0 จะปิดการใช้การเรียนรู้อัตโนมัติ
delay: number - ระบุความล่าช้าระหว่างการลองใหม่ในไม่กี่วินาที
acc: string | false - ระบุว่าควรสะสมความล่าช้าอย่างไรกับการลองใหม่ ยอมรับค่าต่อไปนี้:
'*' (default) - การหน่วงเวลาทวีคูณหลังจากการลองใหม่ในแต่ละครั้งโดยค่า delay ที่กำหนดเช่น delay: 2 หมายถึงการลองใหม่จะทำงานหลังจาก 2 วินาที 4 วินาที 8 วินาทีและอื่น ๆ
'+' - ความล่าช้าที่เพิ่มขึ้นหลังจากการลองใหม่แต่ละครั้งโดยค่า delay ที่กำหนดเช่น delay: 2 หมายถึงการลองใหม่จะทำงานหลังจาก 2 วินาที 4 วินาที 6 วินาทีและอื่น ๆ
false - รักษาค่าคงที่ความล่าช้าระหว่างการลองใหม่เช่น delay: 2 หมายถึงการลองใหม่จะทำงานทุก 2 วินาที
การโหลดภาพขี้เกียจผ่านทางแยก API เป็นสิ่งที่ดี แต่การดาวน์โหลดรูปภาพจะยิ่งใหญ่กว่าเมื่อผู้ใช้ต้องการดูหรือไม่? หรือบายพาสการโหลดขี้เกียจสำหรับภาพแคช? คำตอบคือใช่และคุณสมบัติเหล่านี้จะถูกสร้างขึ้นใน react-cool-img โดยชุดอุปกรณ์ debounce และ cache
โดย prop debounce ภาพสามารถรอการดาวน์โหลดในขณะที่อยู่ในวิวพอร์ตเป็นเวลาที่กำหนด ในกรณีที่คุณมีรายการรูปภาพยาว ๆ ที่ผู้ใช้อาจเลื่อนผ่านโดยไม่ได้ตั้งใจ ในเวลานี้การโหลดภาพอาจทำให้เกิดการสูญเสียแบนด์วิดท์และเวลาในการประมวลผลที่ไม่จำเป็น
นำเข้า IMG จาก "React-cool-img"; นำเข้า App DefaultImg จาก "./images/default.svg" app app = () => (
<imgplaceholder = {defaultimg} src = "https: // the-image-url" debounce = {1000} // ค่าเริ่มต้นคือ 300 (MS) alt = "React Cool IMG"
- โดย cache Prop รูปภาพที่คุณแคชอยู่แล้วจะยกเลิกการโหลดขี้เกียจจนกว่าผู้ใช้จะเยี่ยมชมแอปของคุณในครั้งต่อไป การโหลดขี้เกียจถูกตั้งค่าสำหรับภาพที่เหลือซึ่งไม่ได้แคช สิ่งนี้มีประโยชน์สำหรับ UX เพราะไม่มีงานพิเศษในการโหลดภาพแคชทันทีและเป็นชัยชนะที่ง่ายสำหรับการทำให้ UI ดูง่ายขึ้น
นำเข้า IMG จาก "React-cool-img"; นำเข้า App DefaultImg จาก "./images/default.svg" app app = () => (
<imgplaceholder = {defaultimg} src = "https: // the-image-url" แคช // ค่าเริ่มต้นเป็นจริงเพียงสำหรับ demoalt = "React Cool IMG"
- มีความท้าทายสองประการเมื่อทำการโหลดภาพขี้เกียจด้วยการเรนเดอร์ฝั่งเซิร์ฟเวอร์ หนึ่งคือความพร้อมใช้งานของ JavaScript อีกอันคือ SEO โชคดีที่เราสามารถใช้แท็ก <noscript> เพื่อแก้ปัญหาเหล่านี้ มันจะทำให้ภาพจริงเป็นทางเลือกหาก JavaScript ถูกปิดใช้งานดังนั้นผู้ใช้จะไม่เห็นภาพที่ติดอยู่กับตัวยึด ยิ่งไปกว่านั้นแท็ก <noscript> ตรวจสอบให้แน่ใจว่าภาพได้รับการจัดทำดัชนีโดยบอทของเครื่องมือค้นหาแม้ว่าพวกเขาจะไม่สามารถเข้าใจรหัส JavaScript ของเราได้อย่างสมบูรณ์ ลองดูว่าเวทมนตร์เกิดขึ้นได้อย่างไร
// src/img.tsxconst img = () => {
-
return (<> <imgclass = "image" src = "https: // the-placeholder-image" alt = "ไม่มีเวทมนตร์"/> <noscript> <img class = "image" src = "https: // -actual-Image "alt =" เวทมนตร์เริ่มต้นที่นี่ ... "/> </oscript> </>
- ผู้สังเกตการณ์ทางแยกมีการสนับสนุนที่ดีระหว่างเบราว์เซอร์ แต่ไม่ใช่สากล คุณจะต้องใช้เบราว์เซอร์โพลีฟิลที่ไม่รองรับ Polyfills เป็นสิ่งที่คุณควรทำอย่างมีสติในระดับแอปพลิเคชัน ดังนั้น react-cool-img ไม่รวม
คุณสามารถใช้ Polyfill ของ W3C:
$ YARN เพิ่ม Intersection-Observer# หรือ $ NPM Install-Save Intersection-Observer
จากนั้นนำเข้าที่จุดเริ่มต้นของแอปของคุณ:
นำเข้า "Intersection-Observer";
หรือใช้การนำเข้าแบบไดนามิกเพื่อโหลดไฟล์เมื่อต้องการโพลีฟิลล์เท่านั้น:
(async () => {
if (! ("intersectionobserver" ในหน้าต่าง)) รอนำเข้า ("intersection-observer");}) ();polyfill.io เป็นวิธีทางเลือกในการเพิ่ม polyfill เมื่อจำเป็น
ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):
อึกทึกครึกโครม - |
โครงการนี้เป็นไปตามข้อกำหนดทั้งหมดของผู้เข้าร่วม การมีส่วนร่วมทุกชนิดยินดีต้อนรับ!
