JavaScript와 Bootstrap을 사용하여 나만의 개인 웹사이트를 만드는 동안 프로젝트 섹션 아래에 콘텐츠 카드를 표시하는 문제가 발생했습니다. 부트스트랩 그리드 시스템 의 간단한 " 행 " 클래스를 사용하여 모든 열이 동일한 수평 축에서 가장 높은 카드와 동일한 높이를 갖는 열 블록을 만들었습니다.

내 카드의 크기가 모두 같으면 문제가 되지 않지만 내 카드 내용의 길이는 가변적입니다. 내 해결책은 Bootstrap 문서 에서 권장하는 대로 계단식 그리드 레이아웃에 Masonry 라이브러리를 사용하는 것이었습니다 . 훌륭하게 작동했지만 작은 문제가 하나 있습니다. 이미지 및 Masonry와 함께 제공되는 첫 페이지 로드 문제.

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

해결책?

나는 내가 직면한 문제를 정확히 파악하고 해결하기 위해 부끄러운 시간을 보냈고 나는 혼자가 아니었습니다. 적절한 솔루션을 요청하는 다른 많은 게시물이 포럼에 흩어져 있습니다. 거의 모든 것을 시도한 후 나는 미래의 Masonry 사용자가 모든 것을 추적하는 수고를 덜기 위해 이 하나의 기사에 모든 학습 내용을 통합하기로 결정했습니다.

해결 방법 1: Promise.all( )

이것은 Masonry 팀에서 권장하는 솔루션 이자 개인 웹 사이트의 첫 번째 로드 문제를 해결하는 데 사용한 솔루션이었습니다 . Promise.all()을 사용하는 스크립트 태그를 html 파일 끝에 추가하여 html 요소의 모든 이미지가 렌더링을 완료하고 Masonry를 적용하기를 기다립니다. 이 기사의 전반부 에서 설명한 대로 약속을 사용하지 않고도 유사한 솔루션을 얻을 수 있습니다 . 이것은 저처럼 대기할 이미지 자산이 많지 않은 경우 좋은 솔루션이지만 이미지가 많은 경우 문제가 될 수 있습니다.

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();
});

이미지 자산이 많은 경우 Masonry를 만든 동일한 팀에서 만든 JavaScript 라이브러리인 imagesLoaded 라이브러리를 사용하는 것이 좋습니다. CDN 스크립트를 가져오거나 패키지 관리자를 사용하여 설치하면 바로 사용할 수 있습니다. 문서에는 바닐라 JavaScript 및 jQuery에서 imagesLoaded를 사용하는 방법에 대한 훌륭한 예제도 있습니다. 2021년의 Stack Overflow 게시물은 imagesLoaded를 사용하여 Masonry 오류를 수정하는 방법을 설명하는 데 큰 도움이 되었으며 현재 게시물을 만든 사람이 자신의 개인 웹사이트에서 검사 를 눌렀을 때 사용하고 있는 것을 볼 수 있습니다.

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

커뮤니티에서 떠도는 세 번째 솔루션은 부트스트랩이 문서 마지막 부분에서 권장하는 스크립트 태그를 비동기에서 동기화로 변경하는 것입니다. 여기서 아이디어는 Masonry 라이브러리가 나머지 html과 비동기적으로 실행을 중지하면 이미지 자산이 먼저 로드될 시간이 있다는 것입니다. 저는 이 솔루션을 복제할 수 없었지만 여기 Masonry GitHub에서 열린 문제에서 다른 Bootstrap 사용자가 제안하고 승인했습니다 .

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