पृष्ठभूमि में चित्र लोड हो रहे हैं। जावास्क्रिप्ट मॉड्यूल

कुछ समय पहले, मैंने एक उच्च भार के साथ एक बड़ी परियोजना लिखना शुरू किया, जिसने जावास्क्रिप्ट का व्यापक उपयोग किया। इस समय के दौरान, मुझे कई चीजों पर पुनर्विचार करना पड़ा और उन्हें हल करने के लिए असामान्य समस्याओं और विभिन्न चालों का सामना करना पड़ा। इनमें से एक चाल पर बाद में चर्चा की जाएगी।

समस्या:

साइट में एक पृष्ठ होता है जिस पर ajax अनुरोधों और बड़ी संख्या में स्क्रिप्ट का उपयोग करके सभी जानकारी उत्पन्न की जाती है। और कार्यक्षमता की वृद्धि के साथ, टाइपसेटिंग और चित्रों की संख्या जो मूल रूप से डाउनलोड पृष्ठ पर थे। यदि आप उपयोगकर्ता क्रियाओं और सामग्री की पृष्ठभूमि लोडिंग की भविष्यवाणी के कार्य में इसे जोड़ते हैं, तो पृष्ठ के प्रारंभिक रेंडरिंग और इंटरफ़ेस की प्रतिक्रिया समय के साथ स्थिति पूरी तरह से उदास हो जाती है।

समाधान:

समस्या को हल करने के उपायों में से एक मॉड्यूल लिखना था जो न केवल आवश्यकतानुसार चित्रों को अपलोड करेगा, बल्कि अगर किसी कारण से डाउनलोड विफल हो जाता है, तो मामले में भी स्टब्स डाल सकते हैं।

जब एक स्क्रिप्ट की जरूरत होती है:

• आपके पास एक जटिल साइट है
• जानकारी ajax`om अपलोड करें
• बहुत से लेआउट जो उपयोगकर्ता को नहीं दिखाए जा सकते हैं

छवियों के विलंबित लोडिंग के लिए स्क्रिप्ट का उपयोग करना, आप आवश्यकतानुसार सामग्री डाउनलोड कर सकते हैं, जिससे सर्वर पर लोड कम हो सकता है और उपयोगकर्ता के लिए साइट को गति मिल सकती है।

यह कैसे काम करता है:

• आपके पास चित्रों के साथ एक छिपा हुआ पृष्ठ है।
• इसके बजाय, छवि 1px में भरी हुई है।
• स्क्रिप्ट सभी चित्रों के माध्यम से चलती है, उन्हें समूहों में विभाजित करती है।
• यदि आपके पास लोड के बिना खाली समय है, तो आप एक स्क्रिप्ट के साथ एक निश्चित समूह की तस्वीरें लोड कर सकते हैं (यदि आप मानते हैं कि उपयोगकर्ता को जल्द ही उनकी आवश्यकता हो सकती है)।
• यदि उपयोगकर्ता ने आपके छिपे हुए पृष्ठ का अनुरोध किया है - आप चित्र दिखाते हैं।
• यदि आपने गलत छवि पता निर्दिष्ट किया है, तो यह आपके स्टब को 1px पर छोड़ देगा और छवि को नहीं बदलेगा।

डाउनलोड: डेमो मॉड्यूल ही

फायदे:

मॉड्यूल देशी जावास्क्रिप्ट में लिखा गया है।
इसके संचालन के लिए किसी पुस्तकालय की आवश्यकता नहीं है।
1.5 kb के लिए Google कंप्रेसर का उपयोग करके संपीड़ित।
चेनिंग पैटर्न का समर्थन करता है। अर्थात्, तरीकों को इस तरह कहा जा सकता है:
lazyLoadingImages.show ("1")। load ("2")। load ("3");
यदि आप चाहें, तो आप मॉड्यूल में अपने ऑब्जेक्ट या वैरिएबल के लिंक को फॉरवर्ड कर सकते हैं और दूसरा ग्लोबल वैरिएबल बनाने से बच सकते हैं।

का उपयोग करें:

पृष्ठ शीर्षक में डालें:

<script defer src="js/lazyLoadingImages.min.js"></script> 

दस्तावेज़ में चित्र निम्नानुसार वर्णित किए जाने चाहिए:

 <img src="./images/empty.png" url="./images/1200.jpg" type="group1" /> 

जहां:

src = "./ images / empty.png" - 1px साइज में स्टब इमेज का पता
url = "./ images / 1200.jpg" - मूल बड़ी तस्वीर का पता
प्रकार = "समूह 1" - समूह आईडी, वैकल्पिक पैरामीटर

इंटरफ़ेस

DOMContentLoaded ईवेंट (DOM लोडिंग का अंत) के द्वारा, मॉड्यूल में डाली गई वैश्विक ऑब्जेक्ट को lazyLoadingImages विधि (डिफ़ॉल्ट रूप से यह window.lazyLoadingImages है) सौंपा गया है।

lazyLoadingImages.update () - छवियों की सूची को अपडेट करता है और मूल छवियों को लोड करने के लिए उनके यूआरएल को याद करता है। मॉड्यूल प्रारंभ होने पर इस विधि को स्वचालित रूप से कहा जाता है। यदि पृष्ठ का DOM बदल गया है तो यह उपयोगी हो सकता है।

lazyLoadingImages.load (प्रकार) - एक निश्चित समूह के चित्रों को लोड करेगा (प्रकार पैरामीटर इंगित करता है कि कौन सा)। प्रकार पैरामीटर वैकल्पिक है। डिफ़ॉल्ट रूप से, यह उन चित्रों को लोड करता है जिनके लिए समूह आईडी सेट नहीं है।

lazyLoadingImages.show (प्रकार) - एक निश्चित समूह के चित्र दिखाते हैं (प्रकार पैरामीटर इंगित करता है कि कौन सा)। प्रकार पैरामीटर वैकल्पिक है। डिफ़ॉल्ट रूप से, यह उन चित्रों को दिखाता है जिनके लिए समूह आईडी सेट नहीं है।

युपीडी:
इस तथ्य के कारण कि रगॉस्ट गीथहब के लिए लिंक उपलब्ध नहीं है
धन्यवाद मैकेनिज़्म टिप्पणी के लिए, मापदंडों का नाम बदला। अब डेटा-यूआरएल और डेटा-प्रकार।

ठूंठ वाली छवि के बारे में

जब हम किसी दस्तावेज़ में चित्र पेस्ट करते हैं (उदाहरण के लिए, भीतर HTML के माध्यम से खिलाड़ियों की एक लंबी सूची प्रदर्शित करते हैं), तो आप थोड़ा चाल जोड़ सकते हैं:

• हम सभी चित्रों को दृश्यता = छिपी हुई संपत्ति (या बेहतर प्रदर्शन: कोई नहीं) के साथ सम्मिलित करते हैं
• हम सभी चित्रों पर ऑनलोड घटना को लटकाते हैं
• यदि ऑनलोड हुआ है - दृश्यता को हटा दें, यदि नहीं - इसे छोड़ दें जैसा कि यह है

यह पता चला है कि यदि सर्वर पर कोई चित्र नहीं है, तो हमारे पास बस इसकी जगह एक सफेद वर्ग है। मैं यह भी सलाह देता हूं कि आप शैलियों में सभी चित्रों के लिए आकार सेट करें, ताकि यदि बस एक सफेद वर्ग हो, तो यह आवश्यक क्षेत्र लेता है। यदि आवश्यक हो, तो एक ही फ़ंक्शन में आप लोड करने से पहले और बाद में क्षणों में ऊँचाई और शीर्षक छवियां सम्मिलित या हटा सकते हैं।

सीएसएस

 .visibility { visibility: hidden; } 

जावास्क्रिप्ट

 utils.showAfterLoading: function(node) { utils.removeClass(node, "visibility"); } 

एचटीएमएल

 <img src=" url" class="visibility" onload="utils.showAfterLoading(this)" /> 

UPD2:

DjOnline की टिप्पणियों के अनुसार दो तरीके जोड़े गए:

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

lazyLoadingImages.offScroll (प्रकार) - पृष्ठ को स्क्रॉल करते समय एक निश्चित समूह (वैकल्पिक पैरामीटर प्रकार इंगित करता है कि कौन सा) की छवि को प्रदर्शित करता है (ऊपर विधि देखें)। डिफ़ॉल्ट रूप से, उन तस्वीरों को रीसेट करता है जिनके लिए समूह आईडी सेट नहीं है।

इसलिए अब स्क्रॉल करते समय मॉड्यूल चित्रों को लोड कर सकता है। वजन: 2.7 केबी

डेमो: यहाँ या यहाँ