🎗️ 🤽 🕹️ Mobify.js - संसाधनों को लोड करने से पहले DOM को बदलना 📣 👨🏿‍🤝‍👨🏻 👨🏼‍💼

Mobyfy.js मुख्य रूप से उत्तरदायी वेबसाइटों के निर्माण की सुविधा के लिए बनाया गया एक खुला पुस्तकालय है। मुख्य विशेषता तथाकथित "कैप्चरिंग एपीआई" है - आपको सीधे डोम को संशोधित करने की अनुमति देता है क्योंकि ब्राउज़र संसाधनों (स्क्रिप्ट, चित्र, आदि) को लोड करना शुरू कर देता है।

यहाँ उत्तरदायी छवियों के साथ काम करने का एक उदाहरण है :

<picture> <source src="/examples/assets/images/small.jpg"> <source src="/examples/assets/images/medium.jpg" media="(min-width: 450px)"> <source src="/examples/assets/images/large.jpg" media="(min-width: 800px)"> <source src="/examples/assets/images/extralarge.jpg" media="(min-width: 1000px)"> <img src="/examples/assets/images/small.jpg"> </picture>

फ़ाइल "small.jpg" को बड़ी स्क्रीन के साथ क्लाइंट पर लोड नहीं किया जाएगा, इसके बजाय यह लोड होगा जो मीडिया मानदंड को पूरा करेगा (आप "नेटवर्क" टैब पर वेब इंस्पेक्टर में जांच कर सकते हैं)।

नमूना कोड एक पृष्ठ पर सभी छवियों की जगह:

कोड का विस्तार करें

 <script id="main-executable" class="mobify"> var main = function () { var capturing = window.Mobify && window.Mobify.capturing || false; if (capturing) { // Grab reference to a newly created document Mobify.Capture.init(function(capture){ var capturedDoc = capture.capturedDoc; var grumpyUrl = "/mobifyjs/examples/assets/images/grumpycat.jpg" var imgs = capturedDoc.getElementsByTagName("img"); for(var i = 0; i < imgs.length; i++) { var img = imgs[i]; var ogImage = img.getAttribute("x-src"); img.setAttribute("x-src", grumpyUrl); img.setAttribute("old-src", ogImage); } // Render source DOM to document capture.renderCapturedDoc(); }); } }; main(); </script>

ऑपरेशन का सिद्धांत काफी दिलचस्प है: हेड टैग की शुरुआत में पृष्ठ पर, एक स्क्रिप्ट डाली जाती है जो अस्थायी रूप से PLAINTEXT टैग में BODY सामग्री लपेटती है - यह संसाधनों के लोड को रोकता है। अगला, हमारे कोड को निष्पादित किया जाता है, DOM के साथ जोड़तोड़ किया जाता है, लेकिन अंत में, BODY को पुनर्स्थापित किया जाता है और संसाधन लोड किए जाते हैं।

ब्राउज़र समर्थन:

वेबकिट (सफारी, क्रोम, आदि) - सभी संस्करण
फ़ायरफ़ॉक्स 4.0+
ओपेरा 11.0+
इंटरनेट एक्सप्लोरर 10+

आधिकारिक साइट , मोज़िला साइट पर एक दिलचस्प चर्चा - टिप्पणियों में तकनीक का स्पष्टीकरण है।

Mobify.js - संसाधनों को लोड करने से पहले DOM को बदलना

More articles: