हम एपीएनजी प्रारूप के आधुनिकीकरण के लिए समर्थन की परिभाषा को तेज करते हैं

इस तथ्य के बावजूद कि हर कोई एचटीएमएल 5 की क्षमताओं के बारे में बात कर रहा है, पारदर्शिता के साथ प्रीलोडर के रूप में वेबसाइट डिजाइन का ऐसा प्राथमिक तत्व अभी भी एनिमेटेड जीआईएफ का उपयोग करके किया जाना है। 8-बिट एनिमेटेड GIF का उपयोग करना पारभासी बदलाव को लागू करना असंभव बनाता है। एनिमेटेड जीआईएफ के एक आधुनिक विकल्प के रूप में, हम दो प्रतिस्पर्धी स्वरूपों को मान सकते हैं - MNG और APNG , लेकिन MNG नहीं करता है और सबसे अधिक संभावना है कि उन्हें ब्राउज़र से मूल समर्थन कभी नहीं मिलेगा, और हम पहले ही दूसरे छमाही से फ़ायरफ़ॉक्स और ओपेरा में APNG प्रारूप का उपयोग कर सकते हैं। 2008 साल। दुर्भाग्य से, क्रोम, सफारी और इंटरनेट एक्सप्लोरर को छोड़ दिया गया है, उन्हें अभी भी पुराने GIF प्रारूप में कोणीय छवियों का उपयोग करना होगा। हालांकि, आज हमारे पास मॉर्डनिज़र जैसी एक अद्भुत चीज है - ब्राउज़र की नाम और संस्करण का निर्धारण करने के शातिर अभ्यास का उपयोग करने के बजाय, ब्राउज़र की क्षमताओं का निर्धारण करने के अभ्यास में संक्रमण के लिए एक उपकरण।

दरअसल APNG Modernizr टेस्ट ही

APNG के लिए जावास्क्रिप्ट कोड को परिभाषित करने वाले समर्थन का एक छोटा सा टुकड़ा खोजने के बाद, मैं किसी तरह तुरंत इसे मॉडर्निज़्रर में बांधना चाहता था, क्योंकि बाद में इसके लिए एक विशेष सरल एपीआई है:

/** * APNG Modernizr Test Workaround */ (function(){ var testImage = new Image(); var canvasContext = document.createElement('canvas').getContext('2d'); var isApngSupported = false; testImage.onload = function () { canvasContext.drawImage(testImage, 0, 0); isApngSupported = canvasContext.getImageData(0, 0, 1, 1).data[3] === 0; if (typeof isApngSupported !== "boolean") { var isApngSupported = false; } Modernizr.addTest('apng', function() { return isApngSupported; }); }; testImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjVEwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAAAAAAAAAAD6A+gBAbNU+2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg=="; })(); 

ब्राउज़र APNG का समर्थन करता है या नहीं, इसके आधार पर, html टैग में एक अतिरिक्त apng या no-apng । CSS से, हम इसे इस तरह से उपयोग कर सकते हैं:

 .no-apng .preloader { background-image: url(some.gif); } .apng .preloader { background-image: url(some.png); } 

एनीमेशन को नहीं समझने वाले कार्यक्रमों के लिए, एपीएनजी को एक स्थिर पीएनजी के रूप में प्रदर्शित किया जाता है।

मेरे सहकर्मी सेविट `y का धन्यवाद।