प्रतिमा प्रीलोड करत आहे. HTML5 इमेज लोडर कसा बनवायचा. अपलोड करण्यासाठी फायलींची एकाधिक निवड

आम्हाला प्रतिमा प्रीलोड करण्याची आवश्यकता का आहे? बऱ्याचदा आम्ही ते इंटरफेस आणि साइट नियंत्रणाच्या उच्च-गुणवत्तेच्या रेखांकनासाठी वापरतो. ग्राफिक बाण हालचाली नियंत्रित करण्यासाठी जबाबदार आहेत. जेव्हा तुम्ही बाणावर फिरता, तेव्हा तिची प्रतिमा दुसऱ्याने बदलली जाते.
हॉव्हरवर ब्राउझर काय करतो? हे सर्व्हरला प्रतिमा विनंती पाठवते. अगदी द्रुत प्रतिसाद देऊनही, "ब्लिंकिंग" प्रभाव लक्षात येईल. तुम्ही प्रतिमा प्रीलोड केल्यास, हे होणार नाही ApplicationB आधुनिक मांडणीहा दृष्टिकोन क्वचितच वापरला जातो. CSS Sprites वापरणे अधिक श्रेयस्कर आहे. परंतु, जर हे शक्य नसेल आणि तुम्हाला त्याची खरोखर गरज असेल, तर मांजरीमध्ये तुमचे स्वागत आहे.

Var imgPath = "/tpl/images/"; // प्रतिमांसह निर्देशिकेचा मार्ग // प्रतिमांची यादी var preloadImagesList = Array("about_hover.jpg", "news_hover.jpg", "photo_hover.jpg", "video_hover.jpg", "contacts_hover.jpg"); / // *******************************// प्रीलोड फंक्शन फंक्शन प्रीलोड इमेजेस(इमेज)( साठी(var i = 0) ; i< images.length; i++){ var image = images[i]; $("").attr("src", imgPath + image); )//for )//preloadImages /**************************** ********** ****/ // फंक्शन कॉल $().ready(function())( preloadImages(preloadImagesList); ))

गेम खेळण्यासाठी तुम्हाला सुमारे 12 प्रतिमा अगोदर लोड करणे आवश्यक आहे आणि या प्रतिमा प्रत्येक केसमध्ये बदलू शकतात. म्हणजेच, आता मला काही 12 प्रतिमा (SVG) लोड करायच्या आहेत आणि उद्या मला आणखी 12 ची गरज आहे. म्हणून, त्या ठेवण्याचा पर्याय योग्य नाही, कारण या प्रकरणात तुम्हाला सर्व प्रतिमा सतत लोड कराव्या लागतील आणि मला त्यापैकी फक्त 12 आवश्यक आहेत, म्हणून, गेम सुरू करण्यापूर्वी जावास्क्रिप्ट वापरून लोड करण्याचा निर्णय घेण्यात आला. हे करण्यासाठी, मी एक लहान वर्ग "AssetsPreloader" कार्यान्वित केला, ज्यामध्ये आतापर्यंत, आहे एकमेव पद्धत"प्रीलोड", जे फॉर्मच्या ऑब्जेक्ट्सचे ॲरे घेते (src: "लिंक", id: "id") आणि आवश्यक प्रतिमा लोड करते सुलभ निर्मितीप्रतिमा() वर्ग (नेटिव्ह) चे उदाहरण.

क्लास ॲसेट्सप्रीलोडर ( स्टॅटिक प्रीलोड(arr) ( arr.map((a) => ( let img = new Image(); img.src = a.src; img.id = a.id; (this.assets = this. मालमत्ता ||. push(img);

सर्व लोड केलेल्या प्रतिमा या वर्गाच्या स्थिर मालमत्तेमध्ये संपतात.

कोडमध्ये पुढे गेमची पहिली फ्रेम रेंडरिंग आहे, जिथे या प्रतिमा आधीच वापरल्या गेल्या आहेत. आणि, सर्वसाधारणपणे, समस्या अशी आहे की प्रस्तुतीकरण होत नाही. कोड अंमलात आणला जातो, मी हे तपासले आणि त्यानंतर कोड कार्यान्वित केला जातो, परंतु प्रतिमा स्वतःच काढल्या जात नाहीत. जोपर्यंत मला समजले आहे, असे घडते कारण प्रतिमांना लोड करण्यासाठी वेळ नाही (जरी ते डिस्कवरून लोड केले जातात). तथापि, जर तुम्ही थेट ब्राउझर कन्सोलमधून पहिली फ्रेम काढण्याची विनंती केली, तर सर्वकाही जसे पाहिजे तसे कार्य करते आणि फ्रेम सामान्यपणे काढली जाते.

संपूर्ण कोड साधारणपणे असे काहीतरी दिसते:

क्लास ॲसेट्सप्रीलोडर ( स्टॅटिक प्रीलोड(arr) ( arr.map((a) => ( let img = new Image(); img.src = a.src; img.id = a.id; (this.assets = this. मालमत्ता || .push(img); this.done = true; ) AssetsPreloader.preload([src: "images/image.svg", id: "id_of_image"), ... ]); // ... GAME.field.draw();

सरतेशेवटी, प्रतिमा (आणि सर्वसाधारणपणे विविध प्रकारच्या फाइल्स) शक्य तितक्या योग्यरित्या कशा लोड करायच्या हा प्रश्न खाली येतो जेणेकरून ते लोड होईपर्यंत, कोड पुढे कार्यान्वित होणार नाही. शिवाय, कदाचित या क्षणी स्क्रीनवर काही प्रकारची प्रगती बार असेल (म्हणजे, स्क्रिप्ट पूर्णपणे गोठवू नये). माझ्या मनात आलेली पहिली गोष्ट म्हणजे प्रीलोड() पद्धतीत कॉलबॅकमध्ये उर्वरित सर्व कोड जोडणे, परंतु ही कल्पना यशस्वी झाली नाही.

कृपया मदत करा. केवळ कसे यातच नाही तर सर्वात योग्य मार्ग कोणता आहे (सर्वोत्तम सराव, ते सर्व) यात देखील स्वारस्य आहे.

P.S. स्क्रिप्ट फाइल पृष्ठाशी defer विशेषता सह कनेक्ट केलेली आहे. वापरताना, उदाहरणार्थ, async , प्रस्तुतीकरण एकतर घडते किंवा होत नाही (ते कशावर अवलंबून आहे हे मी सांगू शकत नाही). परंतु मी कोडमध्ये पृष्ठ लोडिंग, DOM तयारी किंवा असे काहीतरी तपासण्यासाठी हँडलर जोडू इच्छित नाही.

जेव्हा तुम्ही मांडणीमध्ये गुंतलेले असता आणि चित्रांसह सर्व प्रकारच्या युक्त्या तयार करता (सामान्यत: होव्हरवर किंवा अगदी त्यांच्या ॲनिमेशनसह) तेव्हा, अशी बारकावे नेहमी चित्र/प्रतिमा लोड होण्यास विलंब म्हणून समोर येते. पहिल्या दृष्टीक्षेपात, समस्या तितकी गंभीर नाही आणि चित्रे लोड होताच सर्व काही ठीक होते, परंतु हे पहिले आहे होव्हर प्रभाव, जी प्रतिमा लोड करण्याचा आणि त्याच वेळी पुनर्स्थित करण्याचा प्रयत्न करते, एक धक्कादायक प्रभाव निर्माण करते जो सहसा खूप छान दिसत नाही आणि आपल्या साइटच्या वापरकर्त्यांची पहिली छाप खराब करू शकतो.

ॲनिमेशनसह, गोष्टी आणखी वाईट आहेत. कल्पना करा, उदाहरणार्थ, तुम्हाला JS (JQuery) मध्ये एक पासिंग कार लागू करायची आहे, जी 2 सेकंदांनंतर बसने बदलली आहे. कार आणि बसमधील प्रतिमा भिन्न आहेत. त्याच वेळी, जेव्हा ब्राउझरला त्यांना लोड करण्याच्या क्षमतेसह एक दुवा प्राप्त होईल तेव्हाच ते लोड करणे सुरू होईल ( म्हणजे, ॲनिमेशनच्या सुरुवातीला). असे चित्र लोड होण्यासाठी काही सेकंद लागतील. म्हणजेच, असे दिसून आले की दोन-सेकंद ॲनिमेशनच्या अर्ध्या भागासाठी ही प्रतिमा केवळ लोड केली जाईल - हा क्रम नाही.

परंतु हे सर्व प्रीलोडिंगद्वारे निश्चित केले जाऊ शकते ( प्रीलोड) प्रतिमा, जे तुम्हाला मुख्य पृष्ठ लोड करताना लगेच बफरमध्ये चित्र लोड करण्याची परवानगी देते ( किंवा त्याआधीही). या पोस्टमध्ये मला याबद्दल बोलायचे आहे.

JavaScript (JQuery)मध्ये प्रीलोडिंग इमेजेस माझ्या मते, JS मध्ये लोड करण्याचा पर्याय सर्वोत्तम आहे, विशेषतः जर तुम्ही ॲनिमेशनशी संबंधित असाल तर. त्याचे सार असे आहे की आपण JavaScript वापरून प्रतिमेची एक प्रत तयार करा आणि ती ब्राउझर बफरमध्ये लोड करा, त्याद्वारे, आवश्यक असल्यास, आपल्याला यापुढे प्रतिमा लोड करण्याची आवश्यकता नाही, कारण ती आधीपासून लोड केलेली असेल.

क्लिष्ट वाटतंय? =) परंतु हे फक्त या कोडसारखे दिसते, जिथे आपल्याला प्रतिमेचा मार्ग आपल्या स्वत: च्या बरोबर बदलण्याची आवश्यकता आहे आणि सर्वकाही कार्य करेल:

// तयार करा jQuery फंक्शन, जे बफरमध्ये प्रतिमा लोड करेल jQuery.preloadImages = function() ( for(var i = 0; i< arguments.length; i++) { jQuery("").attr("src", वितर्क[ i ​​]); ) ); // $.preloadImages("/tpl/testimg.png") लोड करणे आवश्यक असलेल्या प्रतिमेचा मार्ग निर्दिष्ट करा;

जर तुम्हाला अनेक प्रतिमा लोड करायच्या असतील, तर तुम्ही त्यांची स्वल्पविरामाने विभक्त केलेली यादी करू शकता, जसे की:

$.preloadImages("imageone.jpg", "dirname/imageok.jpg", "/tpl/testimg.png");

कितीही चित्रे असू शकतात. मुख्य गोष्ट म्हणजे JQuery फंक्शन विसरू नका, त्याशिवाय प्रीलोडिंग कार्य करणार नाही.

या पद्धतीचे तोटे देखील आहेत, जसे की वापरकर्त्याच्या ब्राउझरमध्ये JS सक्षम आहे की नाही यावर ते अवलंबून असते. पण वर वैयक्तिक अनुभवमी म्हणेन की जर तुम्ही स्वत:ची तुलना जेएस बंद केलेल्यांशी केली तर आधुनिक तंत्रज्ञानवेबसाइट बिल्डिंगची बरीच अंमलबजावणी करणे शक्य होणार नाही. आणि मला वाटते की असे बरेच वापरकर्ते नाहीत. सर्वसाधारणपणे, आपल्याला बहुसंख्यांचे अनुसरण करणे आवश्यक आहे आणि बहुसंख्य ब्राउझरला इतक्या प्रमाणात सानुकूलित करत नाहीत.

मी वैयक्तिकरित्या ही लोडिंग पद्धत अनेक प्रकल्पांमध्ये वापरण्यास प्राधान्य देतो कारण ती अंमलात आणणे सोयीस्कर आहे.

नवीन HTML5 वैशिष्ट्ये वापरून प्रतिमा प्रीलोड करणे ही पद्धत तुलनेने नवीन आहे कारण HTML5 तंत्रज्ञान स्वतःच फार पूर्वी लाँच झाले नव्हते. त्याचे सार असे आहे की आपण चित्राची लिंक द्वारे टाकली आहे लिंक टॅग, आणि मध्ये rel विशेषता (लोड केलेल्या घटकाचा प्रकार) तुम्ही सूचित करता की हे प्रीलोड आहे. अशा प्रकारे, ब्राउझर हा टॅग पाहतो आणि स्वयंचलितपणे प्रतिमा बफरमध्ये लोड करतो.

हे जोडून केले जाते html कोडहा टॅग आवडला ( फक्त तुमच्या स्वतःच्या प्रतिमेची लिंक बदला):

येथे rel मध्ये 2 पॅरामीटर्स आहेत: prerender- महामहिम क्रोमसाठी आणि प्रीफेच- इतर ब्राउझरसाठी. तुम्हाला अधिक प्रतिमा लोड करायच्या असल्यास, टॅग कॉपी करा आणि आवश्यक संख्येने दुवा बदला:

या पद्धतीचा फायदा असा आहे की जेएस अक्षम केल्याने प्रीलोडिंगवर कोणत्याही प्रकारे परिणाम होणार नाही, परंतु वैयक्तिकरित्या मला 2 स्पष्ट तोटे दिसतात:
1) HTML5 तंत्रज्ञान, आणि म्हणून ही प्रीलोडिंग पद्धत, सर्व ब्राउझरद्वारे समर्थित नाही. आता, तथापि, ब्राउझर अद्यतनित केले जात आहेत आणि बहुतेक आधुनिक विकसनशील ब्राउझर एचटीएमएल 5 ओळखतात, परंतु हे अद्याप आदर्शापासून दूर आहे.
2) JS अंमलबजावणीच्या तुलनेत अधिक त्रासदायक, कारण प्रत्येक प्रतिमेचे वर्णन वेगळ्या टॅगसह करावे लागेल ( आणि सह भिन्न मापदंडक्रॉस-ब्राउझर सुसंगततेच्या जवळ काहीतरी साध्य करण्यासाठी rel).

सर्वसाधारणपणे, मला वाटते की ही पद्धत आश्वासक आहे, परंतु यास वेळ लागतो. सध्या त्यात अष्टपैलुत्वाचा अभाव आहे.

प्रीलोड करावेळ-चाचणी केलेल्या HTML मधील प्रतिमा सामान्यतः मनात येणारी पहिली कल्पना आहे शुद्ध html- यासह div ब्लॉक तयार करणे आहे CSS पॅरामीटर "प्रदर्शन:काहीही नाही;", त्यात एक चित्र आहे आणि हे प्रीलोड व्हायला हवे. हे प्रत्यक्षात काम करत नाही, ब्राउझर फक्त बफरमध्ये लोड होण्यास सुरुवात करेल जेव्हा डिस्प्ले कोणत्याहीपेक्षा वेगळा नसेल.

पण मी CSS युक्त्या वापरून एक मार्ग शोधून काढला. मी तुम्हाला त्याच्याबद्दल अधिक सांगेन.

द्वारे अदृश्य ब्लॉकमध्ये प्लेसमेंट CSS अस्पष्टताआणि स्थिती (स्थिती) CSS मध्ये अशी मालमत्ता आहे - अपारदर्शकता. त्याचा उद्देश पारदर्शकता बदलणे आहे आणि तुम्ही पारदर्शकता शून्यावर बदलू शकता. या व्यतिरिक्त, CSS ची देखील स्थिती गुणधर्म आहे, जी पृष्ठावरील घटक ठेवण्यासाठी आवश्यक आहे ( तुम्ही माहितीचा ब्लॉक पिक्सेल बाय पिक्सेल पानाच्या दृश्यमानतेच्या आत आणि पलीकडे कुठेही हलवू शकता). हे सर्व आमच्यासाठी उपयुक्त ठरेल:

अशा प्रकारे, आम्हाला चित्रासह एक अदृश्य ब्लॉक मिळतो, जो प्रत्यक्षात बाहेर देखील असतो वापरकर्त्यासाठी दृश्यमानमाहिती तसे, जर ते काही प्रकारचे अदृश्य ब्लॉक तयार करू इच्छित असतील तर स्क्रीनच्या बाहेर या प्रकारची स्थिती वापरली जाते मी अनेकदा पाहिले आहे की कसे दुवे आहेत; विनामूल्य टेम्पलेट्सअगदी या प्रकारे. तर तुम्हाला सर्व काही माहित आहे =)

जर तुम्हाला अशा प्रकारे अनेक प्रतिमा प्रीलोड करायच्या असतील, तर त्या आत सूचित करा ब्लॉक div, याप्रमाणे:

वेबसाइट डेव्हलपमेंटमध्ये वापरल्या जाणाऱ्या चित्रे/प्रतिमा प्रीलोड करण्याच्या या पद्धती आहेत. आपल्याकडे इतर काही कल्पना असल्यास, टिप्पण्यांमध्ये ते वाचून मला आनंद होईल.
ॲनिमेशनच्या मांडणी आणि निर्मितीसाठी सर्वांना शुभेच्छा! =)

तुम्हाला चित्रांची अजिबात गरज का आहे? चला कल्पना करूया की वेबसाइट पृष्ठावर तुमच्याकडे एक घटक आहे आणि जेव्हा तुम्ही माउसने त्यावर फिरता तेव्हा त्याची पार्श्वभूमी प्रतिमा दर्शवू किंवा बदलू इच्छित आहात. तत्वतः, समस्या उद्भवू नयेत, सर्वकाही सहजपणे सोडवले जाऊ शकते: छद्म-वर्गासाठी स्टाईल मार्कअपमध्ये साइट तयार करताना: फिरवा इच्छित घटकआवश्यक प्रतिमेच्या मार्गावर पार्श्वभूमी गुणधर्म सेट करा.

परंतु एक चेतावणी आहे: जर हॉवर इव्हेंट प्रथमच घडला असेल, तर प्रतिमा लोड होण्यास वेळ लागू शकतो. जरी हा वेळ मध्यांतर लहान असला तरी, काहीवेळा तुम्हाला घटकावर फिरणे आणि प्रतिमा पूर्णपणे प्रदर्शित होण्याच्या दरम्यान एक लहान, त्रासदायक विलंब लक्षात येऊ शकतो. हे स्पष्ट आहे की भविष्यात असा कोणताही विलंब होणार नाही, कारण ब्राउझर चांगल्या विश्वासाने प्रतिमा कॅशे करतील. परंतु, आपल्याला माहिती आहे की, आपल्या वेबसाइटची पहिली छाप केवळ सकारात्मक असावी आणि अशा क्षुल्लक गोष्टींनी ते खराब करण्याची आवश्यकता नाही, विशेषत: ते टाळता येऊ शकतात. एवढी छोटी पण अनोखी समस्या कशी सोडवायची? अनेक पद्धती आहेत, येथे आमचा वेब स्टुडिओ तुम्हाला फक्त अशाच पद्धतींचा परिचय करून देईल ज्या css वापरून सोडवल्या जाऊ शकतात.

पहिले तंत्र म्हणजे ग्राफिक घटक ताबडतोब लोड करणे, आणि नंतर पार्श्वभूमी-स्थिती गुणधर्म वापरून दृश्यमान क्षेत्रातून काढून टाकणे, उदाहरणार्थ खालील x आणि y ऑफसेट सेट करून - -9999px -9999px. जेव्हा होवर घटना घडते, तेव्हा आम्ही आधीच अर्ज करतो वास्तविक मूल्ये, उदाहरणार्थ, तळाशी डावीकडे.

घटक आधीच असल्यास काय करावे पार्श्वभूमी प्रतिमा, आणि जेव्हा तुम्ही माउस कर्सर फिरवता तेव्हा ते बदलणे आवश्यक आहे. वरील तंत्र यापुढे उपाय म्हणून योग्य नाही. सहसा अशा प्रकरणांमध्ये स्प्राइट्स वापरले जातात (संयुक्त पार्श्वभूमी चित्रे) जेव्हा पार्श्वभूमीची स्थिती बदलली जाते. ही पद्धत तुमच्यासाठी उपलब्ध नसल्यास, खालील प्रयत्न करा. प्रतिमा दुसर्यावर लागू करा विद्यमान घटकपृष्ठावर, परंतु ज्यामध्ये पार्श्वभूमी प्रतिमा नाही.

#random-unsuspecting-element (पार्श्वभूमी: url(images/grass.png) no-repeat -9999px -9999px; )

#grass:hover (पार्श्वभूमी: url(images/grass.png) नाही-पुनरावृत्ती; )

केवळ प्रतिमा प्रीलोड करण्यासाठी आवश्यक असलेले नवीन घटक तयार करण्याची कल्पना आहे. तुम्ही म्हणाल की हे सर्वोत्तम नाही सर्वोत्तम मार्ग, कारण अशा डमींची संख्या मोठी असू शकते, परंतु समाधान मोहक होणार नाही. आणि तुम्ही अगदी बरोबर असाल. आम्हाला गरज नाही अतिरिक्त घटक, कारण आपण मनःशांतीसह विद्यमान वापरु शकतो. स्यूडो-क्लासेसच्या आधी:नंतर किंवा:आम्ही वापरणे आवश्यक आहे.

#काहीतरी:पूर्वी (

सामग्री: url("./img.jpg");

दृश्यमानता:लपलेले;

हा पर्याय आम्हाला अतिरिक्त घटक तयार न करता प्रतिमा प्रीलोड करण्याची संधी देतो.

अर्थात, तुम्ही या हेतूंसाठी जावास्क्रिप्ट वापरू शकता, परंतु जर वरील उपाय तुमच्यासाठी वेबसाइट तयार करण्यासाठी पुरेसे असतील तर ते का वापरू नये.

लेखकाची टीप: असे दिसते की प्रतिमा लोड करणे एकतर पूर्णपणे दुर्लक्षित केले आहे किंवा अनावश्यकपणे मोठ्या प्लगइनवर सोडले आहे. सुंदर, गुळगुळीत आणि जलद लोडिंगजागा - सर्वात महत्वाचा भागएक चांगला वापरकर्ता अनुभव, तसेच तुमच्या डिझायनरसाठी मूलभूत सौजन्य. प्रत्येक वेळी पृष्ठात प्रवेश केल्यावर प्रतिमा संथपणे लोड केल्याने त्यांचे डिझाईन खराब झालेले कोणाला पहायचे आहे?

मी काम करत असलेल्या बऱ्याच साइट्स फोटो-हेवी आहेत आणि सर्व फायदे आहेत हाय-स्पीड इंटरनेटअति-उच्च मध्ये सामग्री प्रदान करण्याची गरज नाकारली जाते डोळयातील पडदा ठरावउपकरणांच्या सतत वाढत्या संख्येसाठी. लगाम घेण्याचा आणि प्रतिमा लोडिंग नियंत्रित करण्यास प्रारंभ करण्यासाठी ही योग्य वेळ आहे आणि या लेखात मी तुम्हाला चार सोप्या पद्धती दाखवणार आहे ज्यामुळे तुमची साइट छान दिसेल आणि तिचे कार्यप्रदर्शन कमालीचे सुधारेल.

प्रत्येक वेळी जेव्हा मी एखादी प्रतिमा हळू हळू लोड होत असल्याचे पाहतो, तेव्हा मला कॉमिक बुकमधील त्या व्यक्तीसोबतचा क्लासिक सीन आठवतो.

1. प्रत्येक प्रतिमा स्वतंत्रपणे अपलोड करा (एकल-मालमत्ता)

हे एक तंत्र आहे जे तुम्ही तुमच्या साइटच्या कोणत्याही किंवा सर्व प्रतिमांना लागू करू शकता (किंवा कमीत कमी लपवण्यासाठी) अंतर्निहित JPG चे पारंपारिक लाइन-बाय-लाइन लोडिंग रोखण्यासाठी. आम्ही प्रत्येक प्रतिमा img_wrapper वर्गासह div मध्ये गुंडाळून सुरुवात करू:

< div class = "img_wrapper" > < img src = "comicbookguy.jpg" alt = "" / > < / div >

हा पॅकर आम्हाला काही प्रदान करेल अतिरिक्त नियंत्रणआमच्या प्रतिमांचा आकार आणि त्यांचे गुणोत्तर, ज्याची साधा img टॅग हमी देऊ शकत नाही. हे तुम्हाला लोडिंग स्पिनर लागू करण्याचा पर्याय देखील देईल - एकतर पार्श्वभूमी प्रतिमा किंवा म्हणून स्वतंत्र घटक- प्रतिमा लोड करणे समाप्त झाल्यानंतर लपवले जाऊ शकते.

या उदाहरणासाठी, आम्ही आमची प्रतिमा 4:3 च्या गुणोत्तरापर्यंत मर्यादित करू - प्रतिसाद देणाऱ्या साइटसाठी खूप महत्वाचे. लक्षात ठेवा की आम्ही अपारदर्शकता वापरून प्रतिमा लपवली आहे: 0;, जे आम्हाला ती येते तेव्हा ती कशी आणि केव्हा पाहते यावर नियंत्रण देते योग्य क्षण.

Img_wrapper (स्थिती: सापेक्ष; पॅडिंग-टॉप: 75%; ओव्हरफ्लो: लपविलेले; ) .img_wrapper img (स्थिती: परिपूर्ण; शीर्ष: 0; रुंदी: 100%; अपारदर्शकता: 0;)

img_wrapper( स्थिती: नातेवाईक; पॅडिंग-टॉप: 75%; ओव्हरफ्लो: लपलेले; Img_wrapper img ( स्थिती: निरपेक्ष; शीर्ष: 0; रुंदी: 100%; अस्पष्टता: 0;

DOM मधील प्रत्येक इमेज लोड इव्हेंट सुरू करते जेव्हा त्याचा सर्व डेटा सर्व्हरवरून लोड केला जातो आणि प्रतिमा स्वतः ब्राउझरद्वारे प्रस्तुत केली जाते. हा कार्यक्रम कॅप्चर आणि बाइंड करण्यासाठी, आम्हाला JavaScript वापरावे लागेल. मी इमेज टॅगमध्ये एक ऑनलोड विशेषता जोडून प्रारंभ करेन.

< div > < img src = "comicbookguy.jpg" alt = "" onload = "imgLoaded(this)" / > < / div >

ज्यांनी याआधी असे काहीही पाहिले नाही अशा नवशिक्यांसाठी, याला इनलाइन स्क्रिप्ट विशेषता म्हणतात, आणि ते आम्हाला JavaScript कार्यक्षमता थेट वरून काढलेल्या इव्हेंटशी बांधण्याची परवानगी देते DOM घटक, जे इनलाइन वापरून थेट घटकांमध्ये शैली जोडण्यासारखे आहे शैली गुणधर्म. विश्वास ठेवा किंवा नका ठेवू, या इनलाइन स्क्रिप्ट विशेषता वेबच्या सुरुवातीच्या काळात JavaScript लेखनाचा एक महत्त्वाचा भाग होत्या आणि इनलाइन शैलींप्रमाणे, आजकाल कोड शुद्धता आणि शब्दार्थ कार्यकर्त्यांद्वारे त्याचा निषेध केला जातो.

त्यामुळे तुमच्यापैकी ज्यांना इनलाइन JavaScript पाहून तिरस्कार वाटतो आणि ते चालवण्यास तयार आहेत, कृपया थांबा आणि माझे शब्द घ्या की ही अजूनही इमेजची लोड इव्हेंट कॅप्चर करण्याची एकमेव सर्वात प्रभावी आणि विश्वासार्ह पद्धत आहे. डोम मी सर्व प्रगती आणि HTML5 साठी असलो तरी, जुने-शालेय तंत्र जोपर्यंत ते शोभिवंत आणि कार्यक्षम आहेत तोपर्यंत वापरण्याविरुद्ध माझ्याकडे काहीच नाही.

याला पर्याय म्हणजे तयार दस्तऐवजातील प्रत्येक प्रतिमेवर लोड इव्हेंट वैयक्तिकरित्या बांधणे. तथापि, जेव्हा दस्तऐवज तयार होण्यापूर्वी प्रतिमा लोड केल्या जातात तेव्हा समस्या उद्भवते आणि आम्हाला प्रत्येक प्रतिमेच्या लोड इव्हेंटमध्ये कार्यक्षमता बांधण्याची संधी मिळण्यापूर्वी. वेगळी समस्याजेव्हा ब्राउझरद्वारे प्रतिमा आधीपासूनच कॅश केल्या जातात मागील सत्र, आणि त्वरित डाउनलोड करा. आम्ही कार्यक्रम चुकतो आणि आमचे कार्य कॉल केले जात नाही. ऑनलोड विशेषतामध्ये या समस्या नाहीत कारण ते इव्हेंटसाठी "पूर्व-बाउंड" आहे, आणि म्हणून ब्राउझर जेव्हा HTML पार्स करते तेव्हा त्यावर प्रक्रिया केली जाते.

जुने शालेय तंत्र जोपर्यंत ते शोभिवंत आणि कार्यक्षम आहेत तोपर्यंत वापरण्यास माझ्याकडे काहीच नाही.

ऑनलोड विशेषता जोडल्यानंतर, इमेज लोड केल्यावर imgLoaded() फंक्शन कॉल केले जाईल. मध्ये ठेवणे आवश्यक आहे javascript फाइलपृष्ठाच्या शीर्षस्थानी (jQuery नंतर, जर तुम्ही ते तुमच्या फंक्शनमध्ये वापरत असाल तर आणि इतर कोणत्याही प्लगइननंतर) जेणेकरून मुख्य भाग विश्लेषित होण्यापूर्वी आणि प्रतिमा लोड होण्यापूर्वी ते संकलित होईल. तुम्ही पेजच्या तळाशी फंक्शन टाकल्यास, फंक्शन डेफिनिशनच्या आधी इमेज लोड होण्याची दाट शक्यता असते.

वापरून कीवर्डयाद्वारे आपण इमेजचा रॉ DOM ऑब्जेक्ट पाठवू शकतो JavaScript फंक्शनएक युक्तिवाद म्हणून:

फंक्शन imgLoaded(img)( var $img = $(img); $img.parent().addClass("लोड केलेले"););

फंक्शन imgLoaded(img) ( var $img = $(img); $img पालक(). addClass("लोड केलेले");

किंवा साध्या JavaScript सह:

फंक्शन imgLoaded(img)( var imgWrapper = img.parentNode; imgWrapper.className += imgWrapper.className ? " loaded" : "लोड केलेले";);

फंक्शन imgLoaded(img) ( var imgWrapper = img . parentNode; imgWrapper. className += imgWrapper . वर्गाचे नाव? "भारित" : "लोड केलेले" ;

जावास्क्रिप्टचा वापर करून, तुम्ही DOM एक पातळी वर त्वरीत जाऊ शकता आणि समाविष्ट असलेल्या रॅपर घटकामध्ये लोड केलेला वर्ग जोडू शकता. मला खात्री आहे की तुम्ही सहमत व्हाल की हा एक आश्चर्यकारकपणे मोहक उपाय आहे. या वर्गाची निवडक शैली करून, तुम्ही आता तुमची लोड केलेली प्रतिमा 1 वर सेट करून प्रदर्शित करू शकता:

Img_wrapper.loaded img( अपारदर्शकता: 1; )

img_wrapper. लोड केलेले img ( अस्पष्टता: 1;

प्रक्रिया सुरळीत चालण्यासाठी, आम्ही img मध्ये काही CSS3 संक्रमणे जोडू आणि आमची प्रतिमा लोड करताना "फेड इन" प्रभाव प्राप्त करू.

Img_wrapper img(स्थिती: परिपूर्ण; शीर्ष: 0; रुंदी: 100%; अपारदर्शकता: 0; -वेबकिट-संक्रमण: अपारदर्शकता 150ms; -moz-संक्रमण: अपारदर्शकता 150ms; -ms-संक्रमण: अपारदर्शकता 150ms; संक्रमण: अपारदर्शकता 150ms;)

Img_wrapper img ( स्थिती: निरपेक्ष; शीर्ष: 0; रुंदी: 100%; अस्पष्टता: 0; वेबकिट - संक्रमण : अपारदर्शकता 150ms ; Moz - संक्रमण: अपारदर्शकता 150ms; Ms - संक्रमण : अपारदर्शकता 150ms ; संक्रमण: अपारदर्शकता 150ms;

codepen.io वर कार्यरत उदाहरण पहा, ज्यामध्ये लोडिंग स्पिनर प्रदर्शित करणारी पर्यायी आवृत्ती समाविष्ट आहे.

प्रगतीशील JPGs

या तंत्राची साइड टीप म्हणून, आणि या लेखावर मला मिळालेल्या काही अभिप्रायाच्या प्रतिसादात, "प्रगतिशील" JPGs चा उल्लेख करणे नक्कीच योग्य आहे. 1990 च्या दशकातील हे आणखी एक जुने तंत्र आहे, ज्यामध्ये लाइन-बाय-लाइन लोडिंग टाळण्यासाठी JPGs "नियमित" ऐवजी "प्रगतीशील" म्हणून संग्रहित करणे समाविष्ट आहे - आणि त्याऐवजी प्रतिमा फ्रेम-बाय-फ्रेम समान उंचीवर प्रस्तुत करणे भार या तंत्राचा मुख्य फायदा असा आहे की जेव्हा प्रतिमा लोड होतात तेव्हा येणारी सामग्री पृष्ठाभोवती उडी मारण्यापासून प्रतिबंधित करते.

लोडिंग स्पिनर आणि फेड-इन्स सारखे परिणाम त्रासदायक आहेत की नाही हा वैयक्तिक आवडीचा विषय आहे, परंतु सर्वसाधारणपणे रॅपिंग div युक्ती या समस्या किमान CSS आणि JavaScript सह सोडवते..

रॅपिंग डिव्ह तंत्र वापरण्याबद्दलची सर्वात चांगली गोष्ट म्हणजे तुम्हाला तुमच्या प्रतिमा लोड झाल्यामुळे त्यांची उंची बदलण्याची काळजी करण्याची गरज नाही आणि तुम्हाला तुमच्या वापरकर्त्यांना पिक्सेलच्या कुरूप गटबद्धतेच्या अधीन करण्याची गरज नाही जे मला वाटते. वापरकर्त्यासाठी त्यामुळे चिडचिड होते सामान्य डाउनलोड. शिवाय, यासाठी काहीही खर्च होत नाही - अनेक वेळा रेखाचित्र पुन्हा रेंडर करण्याची प्रक्रिया प्रत्यक्षात तयार करते अतिरिक्त भारकमी शक्तीसाठी मोबाइल उपकरणे. लोडिंग स्पिनर्स आणि फेड-इन्स सारखे परिणाम त्रासदायक आहेत की नाही हा वैयक्तिक आवडीचा विषय आहे, परंतु मुळात रॅपिंग डिव्ह युक्ती कमीतकमी CSS आणि JavaScript सह या समस्यांचे निराकरण करते आणि बचत करताना वापरकर्त्यावर (CMS परिस्थितीत) अवलंबून राहण्याची आवश्यकता नाही. जेपीजी एका विशिष्ट प्रकारे.

2. बॅच एकाधिक प्रतिमा अपलोड करा

वरील तंत्र वैयक्तिक प्रतिमांसाठी खूप चांगले आहे, परंतु आम्ही कॅरोसेल किंवा स्लाइडशोमध्ये प्रदर्शित करू इच्छित असलेल्या प्रतिमांची निवड असल्यास किंवा आम्ही दगडी बांधकाम सारखे लेआउट प्लगइन वापरत असल्यास काय? सामान्य चूककॅरोसेल/स्लायडर प्लगइन्स वापरताना, त्यांच्या सर्व प्रतिमा लोड होण्यापूर्वी, दस्तऐवज तयार असताना त्यावर प्रक्रिया केली जाते. यामुळे स्लाइडशो रिकाम्या प्रतिमेवर जाऊ शकतो जी अद्याप लोड झाली नाही, विशेषत: जर आम्ही उच्च-रिझोल्यूशन फोटोंशी व्यवहार करत आहोत आणि मोठा आकारफाइल

या इंद्रियगोचरला प्रतिबंध करण्यासाठी, सर्व आवश्यक प्रतिमा आधीच लोड केल्या गेल्या असतानाच तुम्हाला तुमच्या पसंतीच्या प्लगइनवर प्रक्रिया करण्याची आवश्यकता आहे. वरील तंत्राच्या भिन्नतेचा वापर करून, आम्ही आमच्या स्लाइडशोमधील सर्व प्रतिमांमध्ये पुन्हा एक ऑनलोड विशेषता जोडू:

NB: खाली दिलेला मार्कअप फक्त एक सरलीकरण म्हणून प्रदान केला आहे अंदाजे आवृत्तीस्लाइडशो प्लगइन लेआउट आणि आपल्या आवश्यकतांनुसार तयार केले पाहिजे.

< div id = "Slideshow" > < img src = "slide_1.jpg" alt = "" onload = "slideLoaded(this)" / > < img src = "slide_2.jpg" alt = "" onload = "slideLoaded(this)" / > < img src = "slide_3.jpg" alt = "" onload = "slideLoaded(this)" / > < / div >

JavaScript मध्ये, आम्ही प्रतिमा लोडिंगचा मागोवा घेण्यासाठी slideLoaded() फंक्शन वापरू आणि ते तयार झाल्यावर आमचे प्लगइन चालवू:

फंक्शन slideLoaded(img)(var $img = $(img), $slideWrapper = $img.parent(), एकूण = $slideWrapper.find("img").लांबी, percentLoaded = null; $img.addClass("लोड केलेले "); var loaded = $slideWrapper.find(."loaded").लांबी; if(loaded == total)( percentloaded = 100; // प्लगइन सुरू करा $slideWrapper.easyFader(); ) इतर (// ट्रॅक करा प्रक्रिया टक्के लोडेड = लोड केलेले/एकूण * 100);

फंक्शन स्लाइडलोड केलेले(img) ( var $img = $(img) , $slideWrapper = $img. पालक(), एकूण = $slideWrapper . शोधा ("img") . लांबी percentloaded = शून्य ; $img addClass("लोड केलेले"); var loaded = $slideWrapper . शोधा("लोड केलेले"). लांबी; जर (भारित == एकूण) ( टक्के लोड केलेले = 100 ; // प्लगइन सुरू करा $slideWrapper. easyFader(); ) इतर ( // प्रक्रियेचा मागोवा घ्या टक्के लोड केलेले = लोड केलेले / एकूण * 100 ;

प्रत्येक वेळी जेव्हा आम्ही एखादे साहित्य लोड करतो, तेव्हा त्याच्या प्रगतीचा मागोवा घेण्यासाठी आम्ही त्यात लोड केलेला वर्ग जोडतो.
जर आपण प्लगइन सुरू केले तर शेवटच्यासह (मध्ये या प्रकरणात jQuery EasyFader) जेव्हा लोड केलेल्या वर्गासह प्रतिमांची संख्या कंटेनरमधील एकूण प्रतिमांच्या संख्येइतकी असते. म्हणून अतिरिक्त मालमत्तातुम्ही लोड केलेले व्हेरिएबल एकूण व्हेरिएबलमध्ये विभाजित करू शकता आणि वापरकर्त्यांच्या प्रगतीची कल्पना करण्यासाठी, टक्केवारी दाखवून किंवा प्रगती पट्टीची रुंदी नियंत्रित करण्यासाठी किंवा इतर तत्सम मार्गाने त्याचा वापर करू शकता.

पुन्हा, ही स्क्रिप्ट तुमच्या दस्तऐवजाच्या शीर्षस्थानी, jQuery नंतर आणि तयार झाल्यावर तुम्ही प्रक्रिया करणार असलेल्या कोणत्याही प्लगइनवर ठेवली पाहिजे.

3. गतीसाठी प्री-कॅशिंग प्रतिमा

सह साइट्सवर मोठी रक्कमप्रतिमा, वापरकर्ता पृष्ठ ब्राउझ करत असताना पार्श्वभूमीत ब्राउझर कॅशेमध्ये प्रतिमा लोड करून प्रतिमा डाउनलोड करताना आपण लोड किंचित कमी करू शकता.

उदाहरणार्थ, समजा माझ्याकडे एक बहु-पृष्ठ साइट आहे जिथे प्रत्येक दुय्यम पृष्ठाच्या शीर्षस्थानी एक प्रतिमा आहे उच्च रिझोल्यूशन. वापरकर्त्याला प्रत्येक वेळी त्या प्रतिमा लोड होण्याची प्रतीक्षा करण्याऐवजी स्वतंत्र पृष्ठ, वापरकर्ता पृष्ठावर पोहोचण्यापूर्वी तुम्ही त्यांना कॅशेमध्ये लोड करू शकता. चला त्यांच्या URL ॲरेमध्ये टाकून सुरुवात करूया:

var heroArray = [ "/uploads/hero_about.jpg", "/uploads/hero_history.jpg", "/uploads/hero_contact.jpg", "/uploads/hero_services.jpg" ]

var heroArray = [ "/uploads/hero_about.jpg" , "/uploads/hero_history.jpg" , "/uploads/hero_contact.jpg" , "/uploads/hero_services.jpg"

हा डेटा स्क्रिप्ट टॅगच्या रूपात पृष्ठावर पास करण्यासाठी मी सामान्यत: माझे CMS किंवा मी साइट तयार करत असलेला कोणताही बॅकएंड वापरतो. तळटीप. अशा प्रकारे, प्रतिमांची सूची गतिमानपणे अद्यतनित आणि विस्तारित केली जाऊ शकते.

जेव्हा एखादा वापरकर्ता माझ्या साइटच्या मुख्यपृष्ठावर येतो तेव्हा मी त्याची वाट पाहतो पूर्ण भार, काहीही करण्यापूर्वी, मी तृतीय पक्ष लोडिंग जोडून पृष्ठाच्या सामग्री लोडिंगमध्ये व्यत्यय आणत नाही हे सुनिश्चित करण्यासाठी. हे करण्यासाठी, मी विंडो लोड इव्हेंटमध्ये JavaScript कार्यशीलता संलग्न करेन, जे फक्त तेव्हाच सक्रिय होते जेव्हा पृष्ठाची सर्व सामग्री आधीच लोड केली गेली असेल आणि प्रस्तुत केली गेली असेल (प्रतिमांसह), दस्तऐवज तयार इव्हेंटच्या विरूद्ध, जे लवकर सुरू होईल DOM तयार आहे:

फंक्शन preCacheHeros())($.each(heroArray, function())(var img = new image(); img.src = this; )); $(विंडो).लोड(फंक्शन())( preCacheHeros(); ));

फंक्शन preCacheHeros() ( $. प्रत्येक(heroArray, function()( var img = नवीन प्रतिमा(); img src = हे ; } ) ; $(खिडकी). लोड(फंक्शन()( preCacheHeros(); } ) ;

किंवा साध्या JavaScript सह:

फंक्शन preCacheHeros())( साठी(i = 0; i< heroArray.length; i++){ var url = heroArray[i], img = new Image(); img.src = url; }; }; window.onload = preCacheHeros();

फंक्शन preCacheHeros() ( साठी (i = 0; i< heroArray . length ; i ++ ) { var url = heroArray[i], img = नवीन प्रतिमा(); img src = url ; खिडकी onload = preCacheHeros ();

लूप वापरून, आम्ही heroArray ॲरेद्वारे पुनरावृत्ती करतो, तयार करतो रिक्त वस्तूप्रत्येक पुनरावृत्तीवर प्रतिमा, आणि नंतर आमच्या प्रतिमेच्या src विशेषतासाठी URL सेट करा. हे वर्तमान सत्रासाठी ब्राउझरच्या कॅशेमध्ये प्रतिमा लोड करते जेणेकरुन जेव्हा वापरकर्ता प्रत्यक्षात प्रतिमा सादर केलेल्या पृष्ठास भेट देईल तेव्हा ती त्वरित दिसून येईल.

दुर्दैवाने, सराव असला तरी प्री-कॅशिंगलोडिंग वेळा वाढवते आणि क्लायंटच्या बाजूने वापरकर्त्याचा अनुभव सुधारतो, यामुळे सर्व्हरवरील लोड वाढतो. या प्रकरणात, प्राथमिक कॅशिंग करण्यापूर्वी आपल्या साइटच्या विश्लेषणाचा विचार करणे अर्थपूर्ण आहे. तर त्यांच्यापैकी भरपूरआपले वापरकर्ते प्रवेश मुख्यपृष्ठतुमची साइट आणि दुय्यम पृष्ठांना भेट देण्यापूर्वी ती सोडा, किंमत अतिरिक्त विनंत्यातुमच्या सर्व्हरवर शिल्लक राहिलेल्या काही वापरकर्त्यांना सादर केलेल्या फायद्यांपेक्षा जास्त असू शकतात.

प्री-कॅशिंग लागू करण्यापूर्वी आपल्या साइटच्या विश्लेषणाचा विचार करणे अर्थपूर्ण आहे

पूर्वज्ञानात्मक प्रीकाचिंग

तथापि, जर तुम्हाला खरोखरच प्री-कॅशिंग वापरायचे असेल तर, मी त्यामध्ये प्रतिमा विभाजित करण्याची शिफारस करतो लक्षणीय गट, साइटवर धोरणात्मक स्थीत. उदाहरणार्थ, साइटवर राहणारे बहुसंख्य वापरकर्ते मुख्यपृष्ठाला भेट दिल्यानंतर दुय्यम पृष्ठावर जातील हे जाणून, मी दुय्यम पृष्ठाच्या मुख्य पृष्ठाच्या प्रतिमा मुख्यपृष्ठावर असताना पूर्व-कॅशे करीन.

चला, तथापि, माझ्या प्रत्येक ब्लॉग पोस्टमध्ये उच्च-रिझोल्यूशन प्रतिमा देखील आहे. अभ्यागत मुख्यपृष्ठावर असताना त्यांना प्री-कॅश करणे केवळ सर्व्हरच्या बाजूनेच एक मोठा हिट ठरणार नाही, परंतु यामुळे संसाधनांचा अपव्यय देखील होऊ शकतो, कारण, होम पेजला भेट देणारे केवळ 15% वापरकर्ते क्लिक करतील. ब्लॉग पोस्ट. सर्वोत्तम जागाजर तुम्हाला माहित असेल की जवळजवळ सर्व वापरकर्ते तेथून ब्लॉग पोस्टवर जातील हे प्री-कॅशिंग ब्लॉग प्रतिमांसाठी एक लँडिंग पृष्ठ असू शकते.

याला प्री-कॉग्निटिव्ह प्री-कॅशिंग म्हणून ओळखले जाते, जेथे आमचे वापरकर्ते साइटभोवती फिरत असताना वर्तणुकीच्या नमुन्यांचा अंदाज लावण्यासाठी आम्ही आमच्या विश्लेषणातील आकडेवारी वापरतो. हे थोडे विलक्षण वाटेल, परंतु आपण अभ्यागतांच्या प्रवाहाचा अंदाज किती अचूकपणे सांगू शकता आणि ते आपल्या (आणि आपल्या वापरकर्त्यांच्या) फायद्यात बदलू शकता याबद्दल आपल्याला आश्चर्य वाटेल.

हे थोडे विलक्षण वाटू शकते, परंतु आपण अभ्यागतांच्या प्रवाहाचा किती अचूक अंदाज लावू शकता याबद्दल आपल्याला आश्चर्य वाटेल

4. सर्व्हर लोड कमी करण्यासाठी प्रतिमांचे आळशी लोडिंग

आळशी-लोडिंगची संकल्पना लोड होत असलेल्या प्रतिमांचा संदर्भ देते कार्यक्रमानुसारब्राउझरला विनंती करण्यापासून आणि दस्तऐवज लोड होताच पृष्ठावरील सर्व प्रतिमा प्रदर्शित करण्यापासून रोखण्यासाठी विशेष कार्यक्रमानंतर.

मुख्यतः लांब किंवा प्रतिमा-जड पृष्ठांवर वापरले जाते. चालू लँडिंग पृष्ठबॅरल ब्लॉगवर, वर्तमान फिल्टर किंवा पृष्ठामध्ये नसलेल्या प्रतिमा तो घटक दृश्यमान होईपर्यंत अनावश्यकपणे लोड होत नाहीत याची खात्री करण्यासाठी आम्ही मिक्सइटअप प्लगइनसह आळशी लोडिंग एकत्र करतो. आळशी लोडिंगच्या अधीन असलेल्या कोणत्याही प्रतिमा आम्ही img_wrapper क्लाससह div मध्ये पुन्हा गुंडाळू, ज्याला lazy_load क्लास दिला जाईल जेणेकरुन आम्ही त्यांना jQuery वापरून सहजपणे निवडू शकू:

) . लोड(फंक्शन()(

आळशी लोड();

विंडो लोड इव्हेंट फायर झाल्यानंतर वरील फंक्शन आळशीपणे सर्व प्रतिमा लोड करते, परंतु .each() लूपमधील कोड विविध परिस्थितींनुसार अनुकूल केला जाऊ शकतो. विंडो स्क्रोल इव्हेंटशी संलग्न करणे आणि व्ह्यूपोर्टवर स्क्रोल करत असताना आळशीपणे प्रतिमा लोड करणे हा याचा एक सामान्य वापर आहे.

प्रतिमा अपलोड करण्यासाठी पुढे

गेल्या 12 महिन्यांत विविध प्रकल्पांवर यापैकी काही तंत्रांचा प्रयोग करताना, मला नुकत्याच पुन्हा डिझाइन केलेल्या barrelny.com प्रकल्पात (एप्रिलमध्ये जगामध्ये परत प्रसिद्ध झालेल्या) वापरण्यासाठी त्यांना खरोखरच कमी करावे लागले. जिथे मी अत्यंत फोटो आणि प्रतिमा-जड वेबसाइटमधून कार्यप्रदर्शनाचा प्रत्येक औंस पिळून काढण्याचा प्रयत्न करताना प्रतिमा सुंदरपणे लोड होतील याची खात्री करण्यासाठी सर्व चार तंत्रांचे संयोजन वापरले. येथे पृष्ठ लोडिंगसह प्री-कॅशिंग आणि आळशी लोडिंग एकत्र करून AJAX मदत, स्लाइडशो आणि क्लायंट-साइड पृष्ठांकन, आम्ही तयार करू शकलो महान अनुभवसंपूर्ण साइटची गुळगुळीतता.

बॅरल डेव्हलपमेंट टीमद्वारे सादरीकरणासाठी ही तंत्रे डिस्टिल करण्याचा प्रयत्न करत असताना, ही तंत्रे कागदावर किती हलकी आहेत—सामान्यत: jQuery मधील कोडच्या ५-१० ओळी—आणि कोणत्याही प्रकल्पात त्यांची अंमलबजावणी करणे किती सोपे आहे याचे मला आनंदाने आश्चर्य वाटले. याव्यतिरिक्त, त्यापैकी प्रत्येकास अनावश्यक त्रासाशिवाय साध्या जावास्क्रिप्टचा वापर करून लिहिले जाऊ शकते आणि अतिरिक्त कोड, परंतु जर तुम्ही jQuery वापरत असाल, जसे आम्ही बऱ्याचदा करतो, तर तुम्ही निश्चितपणे त्याच्या मजबूत DOM ट्रॅव्हर्सल तंत्राचा लाभ घ्यावा.

ही तंत्रे निःसंशयपणे आहेत एकमेव मार्गत्यांची संबंधित कार्यक्षमता पार पाडते, परंतु ते विद्यमान फ्रेमवर्क आणि प्लगइन्समध्ये सहजपणे जुळवून घेतले जाऊ शकतात. आपण अद्याप प्रतिमा अपलोड करण्याचा विचार केला नसल्यास, मला आशा आहे की आपण आता तसे कराल! त्यापैकी एक किंवा दोन तुमच्या पुढच्या प्रकल्पात का लागू करू नयेत?