Could anyone finally solve the biggest mystery of the history - Isotope + Lazy Loading?

[mrWilson123]

Hi

How to make this plugin: http://jquery.eisbehr.de/lazy/ to work with Isotope. I created an example but it does not work properly. Overlapping images + filter not showing all images.

jsfiddle example: https://jsfiddle.net/a94ed80L/5/

Seems that Isotope don't know the correct image dimensions. Due to the responsive design, images can not contain fixed dimensions. But how to fix that? This is a million dollar question.

I hope someone will notice this issue and finally solves the biggest mystery of the history. :)

Thank you.

[KaitoKid]

Have you looked into using append() for this?

https://isotope.metafizzy.co/methods.html

Also see if $grid.isotope('layout') helps with the layout.

[mrWilson123]

Thank you for your reply, @KaitoKid. Unfortunately, I do not know how to do it. :(

[marcsaleiko]

Thank you @KaitoKid. I had a similar issue with elements overlapping each other. Using the $grid.isotope('layout') method worked for me.

[mrWilson123]

Hi, @marcsaleiko! Would you show me how you did it? Please use my jsfiddle example: https://jsfiddle.net/a94ed80L/5/

I would be very grateful.

[marcsaleiko]

Hey @Siilionu, in my issue I did not use JQuery.lazy(). But the problem is the same. Isotope runs over your elements and calculates the dimensions of the item although the image is not present at the moment (so height is 0 plus padding/margin). The $grid.isotope('layout') method redraws the isotope layout, so you need a mechanism that triggers that repaint when your images are ready. http://jquery.eisbehr.de/lazy/#callbacks shows you some callback functions you can use whenever an image or all images are loaded. So we can simply redraw the layout on every loaded image. See my jsfiddle fork with the callback function. I hope this solves your issue.

[mrWilson123]

Thank you very much, @marcsaleiko. Ohh, i see. :) But now strange behavior occurred. It loads a lot of items at once, especially when paddings removed: https://jsfiddle.net/a94ed80L/8/

[marcsaleiko]

Without digging deeper into the code, maybe without the padding it triggers the lazy loading immediately. Try checking the Lazy docs and try different options or consult stackoverflow for similar issues.

[pjarnfelt]

in general image loads are a problem. I mentioned it in this issue too: #1575
I don't know if is applicable to everyone, but if you know the aspect ratio of you images, then you can make a container that gets the correct height with a css hack, before loading the image. I fixed it this way: https://plnkr.co/edit/qQDG5OLv94x5pJwq

[joomapp]

Wordpress (or any other plugin) adds Lazy Loading of images which causes the problem. Disable Lazy Loading and it works :-)