QA Responsive Image Polyfill API สำหรับเว็บแอปพลิเคชันต่างๆ
Picturefill เป็น API ที่ใช้งานง่าย ชาญฉลาด และตอบสนอง ซึ่งสามารถใช้ได้ในเว็บแอปพลิเคชันต่างๆ เพื่อให้แน่ใจว่าผู้ใช้จะเห็นขนาดที่เหมาะสม ความละเอียดหน้าจอ และอื่นๆ ขึ้นอยู่กับอุปกรณ์
ในฐานะที่เป็น polyfill API ของรูปภาพที่ตอบสนองได้ Picturefill เป็นโอเพ่นซอร์สและใช้งานได้ฟรี และได้รับการพัฒนาโดยใช้ Javascript และ HTML ส่วนใหญ่ใช้สำหรับส่วนหน้าของแอปพลิเคชัน มันสามารถเป็นส่วนเสริมที่ยอดเยี่ยมสำหรับโครงการใดๆ ที่ผู้ใช้ปลายทางอาจมีอุปกรณ์ที่แตกต่างกันในการเข้าถึงแอปพลิเคชัน
Picturefill ให้การสนับสนุนและคุณสมบัติเพิ่มเติมสำหรับองค์ประกอบรูปภาพและ Img ในเบราว์เซอร์ เป็นวิธีที่ง่ายที่สุดวิธีหนึ่งที่จะทำให้แน่ใจได้ว่าไม่ว่าผู้ใช้ของคุณจะเข้าถึงเว็บไซต์ของคุณจากอุปกรณ์ใด รูปภาพจะปรับตามขนาดและความละเอียดของหน้าจอโดยอัตโนมัติ Picturefill ได้รับการทดสอบสำหรับเบราว์เซอร์จำนวนมากรวมถึง Safari, Internet Explorer 9, Google Chrome Mozilla Firefox และอีกมากมาย
เริ่มต้นใช้งาน PictureFill
วิธีที่แนะนำในการติดตั้ง PictureFill ผ่าน NPM โปรดใช้คำสั่งต่อไปนี้เพื่อติดตั้ง
ติดตั้ง PictureFill ผ่าน NPM
npm install picturefillเพิ่มรูปภาพที่ตอบสนองผ่าน JavaScript API ฟรี
ไลบรารี PictureFill แบบโอเพนซอร์สช่วยให้นักพัฒนา JavaScript เพิ่มรูปภาพที่ตอบสนองไปยังไซต์ของตนได้ รวมถึงทำให้แน่ใจว่าผู้ดูที่มีวิวพอร์ตความหนาแน่นของพิกเซลสูงสามารถเห็นเนื้อหาที่มีความละเอียดสูงและจะปรับตามนั้น ในทำนองเดียวกัน คุณสามารถจัดเตรียมรูปภาพจำนวนหนึ่งที่เหมือนกันแต่มีขนาดต่างกันให้กับเบราว์เซอร์ได้ Picturefill จะจัดเรียงและจัดหาแหล่งที่มาที่ดีที่สุดสำหรับขนาดวิวพอร์ตปัจจุบันของผู้ใช้ ความหนาแน่นในการแสดงผล และขนาดของเนื้อหาในเลย์เอาต์ของเว็บไซต์ Picturefill ยังช่วยให้นักพัฒนาตัดสินใจได้ว่าจะแสดงภาพใดขึ้นอยู่กับวิวพอร์ตของผู้ใช้ ด้วยความช่วยเหลือขององค์ประกอบรูปภาพ คุณสามารถระบุขนาดต่างๆ ระดับการซูม อัตราส่วนกว้างยาว ฯลฯ
ระบุเบรกพอยต์รูปภาพผ่าน JavaScript API ฟรี
คุณลักษณะอื่นของ Picturefill คือความสามารถในการกำหนดจุดสั่งหยุดของรูปภาพเฉพาะด้วยตัวเลือกความละเอียดที่แตกต่างกันสำหรับรูปภาพต้นฉบับบนเว็บไซต์ Picturefill ยังมีตัวเลือกในการตัดสินใจเลือกรูปภาพทางเลือกสำหรับรูปแบบรูปภาพที่ไม่รองรับในบางรูปแบบ วิธีนี้จะทำให้เว็บไซต์ของคุณไม่แสดงข้อผิดพลาดในการแสดงรูปภาพ
การสนับสนุนเบราว์เซอร์
ห้องสมุดภาพเปิดได้ให้การสนับสนุนที่สมบูรณ์สําหรับเบราว์เซอร์ประเภทต่างๆ ห้องสมุดได้รับการทดสอบและทํางานได้อย่างราบรื่นบนเบราว์เซอร์จํานวนมากเช่น Firefox, Google Chrome, Internet Explorer, Safari, Opera และอื่น ๆ อีกมากมาย เมื่อ JavaScript ถูกปิดใช้งานเบราว์เซอร์สามารถดูข้อความแอตทริบิวต์ alt เป็น fullback ห้องสมุดได้รวมการสนับสนุนอย่างเต็มที่สําหรับ In9 และแม้กระทั่งรุ่นเก่า. สําหรับ In9 และต่อมาคุณจะต้องห่อห่อองค์ประกอบวิดีโอรอบองค์ประกอบแหล่งที่มาในแท็กภาพของคุณ ตัวอย่างต่อไปนี้แสดงวิธีการทํา
