एंटीमॉड्रेट के साथ बेहतर प्रोग्रेसिव इमेज लोड करें

AntiModerate स्क्रिप्ट ज्यादा नहीं लग सकता है। लेकिन यह सबसे अच्छी जेएस स्क्रिप्ट में से एक है जिसे आप बड़े पृष्ठ पर प्रदर्शन को बेहतर बनाने और एक मजबूत उपयोगकर्ता अनुभव बनाए रखने के लिए चला सकते हैं.

इसके साथ फ्री प्लगइन, आप छवियों को लोड कर सकते हैं जब वे दृश्य में दिखाई देते हैं और अपने कुल पृष्ठ का आकार कम करें.

इस तरह से पूरा पेज लोड हो सकता है प्रथम छवियों के लिए छोटे प्लेसहोल्डर्स के साथ। फिर आपके आगंतुक स्वाभाविक रूप से हर संपत्ति के लोड होने की प्रतीक्षा किए बिना ब्राउज़ करते हैं - हमेशा उपयोगकर्ता के दृष्टिकोण से एक अच्छी बात!

यहां बताया गया है कि यह कैसे काम करता है: आप अपने पेज में StackBlur.js स्क्रिप्ट के साथ एंटीमॉड्रेट प्लगइन जोड़ते हैं.

AntiModerate छवि आयाम खींचती है और सभी img टैग्स को पृष्ठ पर एक निश्चित आकार में मजबूर करता है। ये पूर्व-लोड की गई छवियां StackBlur.js के माध्यम से धकेल दी जाती हैं, जो कुल पूर्वावलोकन फ़ाइल आकार को काफी कम कर देती हैं, इस प्रकार पृष्ठ को पूरी तरह से लोड किया जाता है.

एक बार जब ये छोटी छवियां हो जाती हैं तो एंटीमॉड्रेट पृष्ठभूमि में पूर्ण आकार की छवियों को लोड करता है। डाउनलोड होने के बाद प्रत्येक धुंधली फोटो को नियमित फोटो से बदल दिया जाता है। आसान!

इस छवियों के इंतजार में समय का एक गुच्छा बचाता है और यह आपके पेज को बहुत जल्दी लोड करने में मदद करता है। यह उपयोगकर्ताओं के लिए एक बहुत बड़ा लाभ है क्योंकि वे जल्द ही सामग्री का उपभोग करना शुरू कर सकते हैं, और यह आपकी SERP रैंकिंग को लाभ देता है क्योंकि Google पृष्ठ गति के बारे में बहुत परवाह करता है.

आप लाइब्रेरी को सीधे npm या Bower के साथ स्थापित कर सकते हैं, या GitHub के माध्यम से स्क्रिप्ट खींच सकते हैं.

इसके लिए केवल जावास्क्रिप्ट की कुछ पंक्तियों की आवश्यकता होती है और यह आपके पृष्ठ भार को बेहतर बनाने में मदद करता है। GitHub रेपो पर एक नज़र डालें और आरंभ करने के लिए सेटअप गाइड पर स्क्रॉल करें.

कोड की केवल कुछ पंक्तियों के साथ, AntiModerate किसी भी पृष्ठ पर चलने के लिए एक न-दिमाग होना चाहिए.

इस रन का उल्लेख नहीं है शुद्ध जावास्क्रिप्ट तो यह काम पाने के लिए jQuery जैसी किसी भी निर्भरता की आवश्यकता नहीं है.