javascripthtmlcsswordpressjquery-masonry

Lazyload and Masonry


I'm trying to get this layout working the way I want for WordPress blog. I can't figure out why Lazyload is causing the entire masonry to overlap and load in the same spot instead of a grid. When I remove the Lazyload, the layout functions as a masonry grid, along with the overlay hover.

The second issue is that this code:

.fade {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
}

I can't figure out why I can't remove the unused bracket at the bottom. When I remove it, the entire masonry does not work, it becomes a complete broken mess.

Can anyone enlighten these two problems? Thank you!

Additionally, if you resize the window or flip your mobile device to the side and back, the masonry grid displays fine.

Update: So I found out WordPress 5.5, releasing in August, is including LazyLoad! Will reimplement LazyLoad again by that time.


Solution

  • For your lazyload and mansory problem, it might be a possible solution for you to "fake" or "simulate" the resize of the window. The grid works fine after resize, so it can be a way to trigger that event to make your code work.

    You can use pure javascript, in wordpress you can use the shorter jQuery version:

    Using pure Javascript:

    var simulateResize = new Event('resize');
    window.dispatchEvent(simulateResize );
    

    Using jQuery:

    $(window).trigger('resize');
    

    Make sure you put the code at the bottom of the page, especially you have to put it after the code where the grid elements and contents have been generated.


    For your CSS problem, the correct way to use the @keyframes rule is:

    @keyframes mymove {
      from {top: 0px;}
      to {top: 200px;}
    }
    

    https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

    So your code is correct and the last } is unnecessary. If removing it causes your code to crash, there might be some @media rule around your .fade code, like:

    @media only screen and (max-width: 600px) {}

    which causes the problem if it opens up but do not close.