जावास्क्रिप्ट और बूटस्ट्रैप का उपयोग करके अपनी निजी वेबसाइट बनाते समय , मुझे अपने प्रोजेक्ट सेक्शन के तहत सामग्री कार्ड प्रदर्शित करने में समस्या हुई। बूटस्ट्रैप के ग्रिड सिस्टम से एक सरल " पंक्ति " वर्ग का उपयोग करते हुए , मैंने कॉलम ब्लॉक बनाए जहां हर कॉलम की ऊंचाई समान क्षैतिज अक्ष में सबसे ऊंचे कार्ड के समान थी।

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

<div class="row grid" data-masonry='{"percentPosition": true }'>

समाधान?

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

समाधान 1: प्रॉमिस.ऑल ( )

यह मेसनरी टीम द्वारा स्वयं सुझाया गया समाधान था और जिसे मैंने अपनी निजी वेबसाइट के लिए पहली लोड समस्या को ठीक करने के लिए उपयोग किया था। अपनी html फ़ाइल के अंत में एक स्क्रिप्ट टैग जोड़ें जो Promise.all() का उपयोग करता है ताकि आपके html तत्व में सभी छवियों को प्रस्तुत करने के लिए इंतजार किया जा सके और उसके बाद ही चिनाई लागू की जा सके। इस लेख के पहले भाग में दिखाए गए वादों का उपयोग किए बिना भी इसी तरह के समाधान प्राप्त किए जा सकते हैं । यह एक अच्छा समाधान है यदि आपके पास मेरी तरह प्रतीक्षा करने के लिए बहुत अधिक छवि संपत्तियां नहीं हैं, लेकिन यदि आपके पास कई छवियां हैं तो यह एक समस्या हो सकती है।

Promise.all(Array.from(document.images)
  .filter(img => !img.complete)
  .map(img => new Promise(resolve => { img.onload = img.onerror = resolve; })))
  .then(() => {
     var msnry = new Masonry('.grid');
     msnry.layout();
});

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

$('#portfolio-section').imagesLoaded( function() {
  $('.grid').masonry({
    itemSelector: '.portfolio-item',
    percentPosition: true
  })
});

एक तीसरा समाधान जो समुदाय द्वारा इधर-उधर किया गया है, वह स्क्रिप्ट टैग को बदलना है जो बूटस्ट्रैप अपने प्रलेखन में async से सिंक के अंत में सुझाता है। यहाँ विचार यह है कि यदि मेसनरी लाइब्रेरी बाकी HTML के साथ एसिंक्रोनस रूप से चलना बंद कर देती है, तो इमेज एसेट्स के पास पहले लोड होने का समय होगा। मैं इस समाधान को दोहराने में सक्षम नहीं था, लेकिन इसे मेसनरी गिटहब यहां पर खोले गए एक मुद्दे में एक अन्य बूटस्ट्रैप उपयोगकर्ता द्वारा आगे रखा गया और इसका समर्थन किया गया ।

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" sync></script>