imagesLoaded

jQuery imagesLoaded 是一個相當有用的jQuery外掛,它可以用來偵測網頁中的圖片使否已經成功載入,有人可能會問,偵測圖片已經成功載入能做甚麼!?因為圖片還沒成功載入前我們實無法取得圖片的寬度以及高度的,在許多Layout上的應用,取得圖片的寬與高是非常重要且必要的。

Bootstrap+Masonry瀑布流的套件,讓Bootstrap內建的網格系統,也支援瀑布流的排版,這對於區塊內的元素長短不一時,相當的方便好用,同時瀑布流的欄位數,還是由Bootstrap來作控制,雖然說瀑布流解決了長短不一的問題,但也衍生出另一個問題,那就是當區塊內有圖片時,當圖片還沒載入完成時,區塊就會開始上向疊,而造成區塊覆蓋的問題。

 

HTML
<div class="container">
  <div class="row masonry">
    <div class="col-md-3 item"><img src="https://unsplash.it/2848/4272?image=1027" alt="" class="img-responsive"></div>
    <div class="col-md-3 item"><img src="https://unsplash.it/4951/3301?image=1025" alt="" class="img-responsive"></div>
    <div class="col-md-3 item"><img src="https://unsplash.it/1920/1280?image=1024" alt="" class="img-responsive"></div>
    <div class="col-md-3 item"><img src="https://unsplash.it/4288/2848?image=1020" alt="" class="img-responsive"></div>
    <div class="col-md-3 item"><img src="https://unsplash.it/1942/2913?image=948" alt="" class="img-responsive"></div>
    <div class="col-md-3 item"><img src="https://unsplash.it/5472/3648?image=939" alt="" class="img-responsive"></div>
    <div class="col-md-3 item"><img src="https://unsplash.it/4342/2895?image=893" alt="" class="img-responsive"></div>
    <div class="col-md-3 item"><img src="https://unsplash.it/2900/4334?image=870" alt="" class="img-responsive"></div>
    <div class="col-md-3 item"><img src="https://unsplash.it/0/0?image=789" alt="" class="img-responsive"></div>
    <div class="col-md-3 item"><img src="https://unsplash.it/0/0?image=666" alt="" class="img-responsive"></div>
  </div>
</div>

 

Javascript
在</body>結尾前方,加入imagesLoaded套件,並啟用與當圖片載入完成時,再呼叫Masonry瀑布流套件。
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script>
  $(function(){
    /* 瀑布流區塊div */
    var $container = $('.masonry');

    //當圖片讀取完畢才執行
    $container.imagesLoaded(function (){
      //選擇瀑布流的區塊名稱
      $container.masonry({
        itemSelector: '.item'
      })
    });
  });
</script>

 

 原文:

https://imagesloaded.desandro.com/

「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

masonry瀑布流使用imagesLoaded避免覆蓋圖片

jQuery imagesLoaded 判斷圖片是否載入完成