Solution: jquery.lazy and Masonry

[derSteffen]

No image overlapping during load or srcoll or resize.

I use this Versions (in this order also include):

• jQuery v3.5.1
• jQuery & Zepto Lazy v1.7.10
• Masonry PACKAGED v4.2.2 (https://github.com/desandro/masonry)
• imagesLoaded PACKAGED v4.1.4 (https://github.com/desandro/imagesloaded)

And this is my code.

$(document).ready(function(){

  $('#gallery').imagesLoaded()
      // IMAGESLOADED-INSTANZEN
      .always( function( instance ) {
        // console.log('all images loaded');
      })
      .done( function( instance ) {
        // console.log('all images successfully loaded');
      })
      .fail( function() {
        // console.log('all images loaded, at least one is broken');
      })
      .progress( function( instance, image ) {
        // var result = image.isLoaded ? 'loaded' : 'broken';
        // console.log( 'image is ' + result + ' for ' + image.img.src );

        // LAZY
        $('.lazy').Lazy({
            effect: "fadeIn",
            effectTime: 2000,
            threshold: 0,

                // LAZY-INSTANZEN
                beforeLoad: function(element) {
                // called before an elements gets handled               
                },
                    afterLoad: function(element) {
                    // called after an element was successfully handled
                    // MASONRY
                        $('#gallery').masonry({
                          itemSelector:'div.imagecontainer'
                        });
                    },
                onError: function(element) {
                // called whenever an element could not be handled
                },
                onFinishedAll: function() {
                // called once all elements was handled 
                }
            });
      });
});

THANKS Daniel for your Script.