Cuba untuk membuat Masonry-Layout berfungsi dalam Safari dengan imagesLoaded

Question

Saya berjaya melaksanakan Masonry-Gallery untuk laman web WordPress dengan menggunakan Bootstrap 5 digabungkan dengan "Masonry-Layout". Ia berfungsi dengan baik kecuali dalam Safari di mana susun atur sering rosak, ini adalah isu yang diketahui dan penyelesaiannya harus "imagesLoaded". Saya telah mencuba banyak tetapi saya tidak boleh menambah kelas yang diperlukan di tempat yang betul. Setahu saya kodnya adalah seperti berikut. Ada sesiapa boleh tolong?

<div class="row grid" id="gallery-masonry" data-masonry='{"percentPosition": true }'>
    
<?php 
$images = get_field('gallery');
$size = 'large';
    
if( $images ): ?>       
        <?php foreach( $images as $image_id ): ?>
    
<div class="col-md-6 mb-3">            
    <div id="post-<?php the_ID(); ?>" class="card rounded-0" >  

    <?php echo wp_get_attachment_image( $image_id, $size, "", ["class" => "card-img-top rounded-0","alt"=>""]); ?>

    </div>
</div>   
        <?php endforeach; ?>
  
<?php endif; ?>

</div>

<!--Masonry-Layout-->
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>


<!--ImagesLoaded-->
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>


<!--Script ImagesLoaded-->
<script>
var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
    // options...
  });
});
</script>

Answer 1

Lihat siaran saya tentang menambah Masonry ke tapak WordPress anda.

https://www.customfitwebdesign.com/cara menambah susun atur batu dalam wordpress/

Nota: Masonry sebenarnya dibina ke dalam teras WordPress ( wp-includes/js/masonry.min.js ). Versi WordPress Masonry ini juga termasuk ImagesLoaded (imagesloaded.min.js).