ขณะสร้างเว็บไซต์ส่วนตัวโดยใช้ JavaScript และ Bootstrap ฉันพบปัญหาการแสดงการ์ดเนื้อหาในส่วนโครงการของฉัน ด้วยการใช้คลาส “ row ” แบบ ง่ายๆจากระบบ Grid ของ Bootstrap ฉันสร้างบล็อกคอลัมน์โดยที่ทุกคอลัมน์มีความสูงเท่ากับการ์ดที่สูงที่สุดในแกนนอนเดียวกัน

สิ่งนี้จะไม่เป็นปัญหาหากการ์ดทั้งหมดของฉันมีขนาดเท่ากัน แต่ความยาวของเนื้อหาในการ์ดของฉันนั้นแปรผัน วิธีแก้ไขของฉันคือใช้ไลบรารี Masonryสำหรับโครงร่างกริดแบบเรียงซ้อนตามที่แนะนำในเอกสารBootstrap มันใช้งานได้ดี คาดว่าจะมีปัญหาเล็กน้อย ปัญหาการโหลดหน้าแรกที่มาพร้อมกับรูปภาพและการก่ออิฐ

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

การแก้ไขปัญหา?

ฉันใช้เวลาอันน่าอายในการพยายามระบุและแก้ไขปัญหาที่ฉันเผชิญอยู่ และฉันไม่ได้อยู่คนเดียว มีโพสต์อื่น ๆ อีกมากมายกระจายอยู่ทั่วฟอรัมเพื่อขอวิธีแก้ปัญหาที่เหมาะสม หลังจากลองเกือบทั้งหมดแล้ว ฉันตัดสินใจรวบรวมการเรียนรู้ทั้งหมดของฉันไว้ในบทความเดียวนี้ เพื่อช่วยผู้ใช้ Masonry ในอนาคตในการติดตามพวกเขาทั้งหมด

โซลูชันที่ 1: Promise.all( )

นี่เป็นวิธีแก้ปัญหาที่แนะนำโดยทีมงานก่ออิฐเองและเป็นวิธีที่ฉันใช้เพื่อแก้ไขปัญหาการโหลดครั้งแรกสำหรับเว็บไซต์ส่วนตัวของฉัน เพิ่มแท็กสคริปต์ที่ส่วนท้ายของไฟล์ 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();
});

หากคุณมีแอสเซทรูปภาพจำนวนมาก การใช้ ไลบรารี่ของ imageLoadedซึ่งเป็นไลบรารี JavaScript ที่สร้างโดยทีมเดียวกับที่สร้าง Masonry อาจคุ้มค่า เพียงนำเข้าสคริปต์ CDN หรือติดตั้งโดยใช้ตัวจัดการแพ็คเกจ คุณก็พร้อมใช้งาน เอกสารยังมีตัวอย่างที่ดีเกี่ยวกับวิธีใช้ imageLoaded ในวานิลลา JavaScript และ jQuery โพสต์ Stack Overflowจากปี 2021 อธิบายวิธีแก้ไขข้อผิดพลาด Masonry โดยใช้ imagesLoaded ได้อย่างยอดเยี่ยม และขณะนี้ผู้ที่สร้างโพสต์บนเว็บไซต์ส่วนตัว เห็นว่ากำลังใช้งานอยู่ เมื่อคุณกดตรวจสอบ

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

แนวทางที่สามที่ชุมชนใช้อยู่คือการเปลี่ยนแท็กสคริปต์ที่ Bootstrap แนะนำในเอกสารประกอบในตอนท้ายจาก async เป็น sync แนวคิดที่นี่คือหากไลบรารี Masonry หยุดทำงานแบบอะซิงโครนัสกับ html ที่เหลือ เนื้อหารูปภาพจะมีเวลาในการโหลดก่อน ฉันไม่สามารถทำซ้ำโซลูชันนี้ได้ แต่ได้รับการแนะนำและรับรองโดยผู้ใช้ Bootstrap รายอื่นในปัญหาที่เปิดใน Masonry GitHub ที่นี่

<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>