Jquery पर चित्रों को लोड करने का एक सरल संकेतक

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

काफी लंबी खोज के बाद, एक बहुत ही संक्षिप्त jquery स्क्रिप्ट मिली, जो इस कार्यक्षमता को लागू करती है, लेकिन डिज़ाइन को वांछित होने के लिए बहुत छोड़ दिया गया था, इसलिए इस कोड के टुकड़े को संशोधित करने का निर्णय लिया गया था। और यह वही है जो यह आया था।

कार्य को पूरा करने के लिए, हमें एक चित्र कंटेनर, स्वयं चित्र और एक ब्लॉक संकेतक की आवश्यकता होती है। लोडिंग के दौरान, लोडर ब्लॉक तस्वीर को मास्क करता है और केंद्र में लोडिंग संकेतक दिखाता है। चित्र लोड करने के बाद, ब्लॉक गायब हो जाता है। एक पृष्ठ पर कई चित्रों पर लागू होने पर स्क्रिप्ट बहुत बढ़िया काम करती है।

UPD: टिप्पणीकारों की चर्चा और बहुमूल्य योगदान को ध्यान में रखते हुए कोड को बदल दिया जाता है

एचटीएमएल

<!--[if IE]><style>.loading {display: none !important;}</style><![endif]--> <!--   IE --      .      IE10, IE11,       jQuery  --> <div class="container"> <!--       --> <b class="loading"></b> <!--   c  --> <img src="http://lh5.ggpht.com/-eglPTUEmd7I/UIePRUwEfvI/AAAAAAAAAEw/dkL3SmB7z7A/s9000/beautiful%2Bnature%2B2.jpg" class="image" /> <!--   --> </div> 

jQuery

 $(function() { if(navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i)) { $('.loading').hide(); } $('.image').load(function() { $(this).parent().find(".loading").hide(); }); }); 

सीएसएस

 body { background: #333; } .container { position: relative; margin: 20px auto; width: 300px; height: 200px; border: 5px solid #FFF; } .loading { position: absolute; display: block; background: #555 url('http://katushka.in.ua/templates/katushka2/images/ajax-loader.gif') center center no-repeat; opacity: 0.7; width: 100%; height: 100%; } .image { width: 300px; height: 200px; } 

JsFiddle पर एक उदाहरण देखें।

उदाहरण में चित्र 4000 पिक्सेल से अधिक चौड़े हैं, इसलिए यदि आपके पास एक चैनल है जो बहुत तेज़ नहीं है, तो मुझे लगता है कि आपने इन सुंदरियों पर ध्यान दिया है।

नोट

• उदाहरण एक एनिमेटेड GIF का उपयोग लोडिंग संकेतक के रूप में करता है। आप एक समान सेवा preloaders.net उत्पन्न कर सकते हैं।
• शुद्ध CSS: cssload.net और JS: spin.js संकेतकों का उपयोग किया जा सकता है।
• त्वरित कैश सफाई के लिए क्रोम एक्सटेंशन: कैश साफ़ करें ।
• IE7 में कोड काम नहीं करता है। बाद के संस्करणों में यह काम नहीं कर सकता है - जांच करने का कोई तरीका नहीं था।
• कुछ ASUS राउटर (उदाहरण के लिए, RT-N16) के साथ ताजा देशी फर्मवेयर में गति सीमा समारोह होता है, जो डिबगिंग में मदद करेगा।