lazyload & masonry - difference firefox / webkit

Question

am trying to make work masonry & lazyload together, on a responsive website where the bloc for masonry are in %. I have read all the other post on this subject including this particular one : Combining LazyLoad and Jquery Masonry

I have apply the first method of this post, (except i have to change the line 'reload' cause it doesent work on my website. Dont know why. ) The second method looks great too; but its seems to complex to me. I dont know how to communicate the image size from the server...

So finnaly i got this result: http://test.cas-p.net/-Pipolass-

with this code:

$(document).ready(function(){
//-----------------------------------XX--SCRIPT masonry--XX 
    var $container = $('.masonry');
    container.imagesLoaded(function(){
         //first masonry call on placeholder images
        $container.masonry({
          transitionDuration: 0,
          itemSelector: 'article.bloc',
          columnWidth: 'article.w1'
        });
        //------XX-- lazyload --XX
            //load images who appears on the screen after masonry effect
        $('article.bloc img').addClass('not-loaded');
        $('img.not-loaded').lazyload({
              effect: 'fadeIn', 
              threshold : 900,
              load: function() {
                       // Disable trigger on this image
                       $(this).removeClass("not-loaded");
                      //reload masonry with real images size
                       $container.masonry({
                            transitionDuration: 0,
                            itemSelector: 'article.bloc',
                            columnWidth: 'article.w1'
                       });
              }
        });
        $('img.not-loaded').trigger('scroll');
     });
//-----------------
});

It look to work fine on firefox. But on chrome and safari i got some trouble:

At the end of the page, my container overlaps the footer, sometimes, one image overlaps an other. (more often at the end of the page)

And the worth, in safari once on two, all images overlaps, until you scroll down. (Means the second masonry call, dont work until i scroll down.)

Anybody have an idea to make it work better on safari and chrome ?

(i dont try on IE at the moment... but i am scarry ^^..)

Thanks a lot for helping me, and apologize for my poor english.

After reflexion i suppose my problem come from the img height:auto; But still no solution ... — casp, Jun 13 '14 at 19:50

score 0 · Accepted Answer · edited May 23 '17 at 10:25

OK i found a way to the solution. The problem was coming from my responsive layout who was using height:auto;

I found this post: CSS: height auto issue in responsive layout

Now i use this code:

   //-----------------------------------XX--SCRIPT masonry--XX  

//Images still not loaded
$('article.bloc img').addClass('not-loaded');

function resizeBlankImages() {
        $('img.not-loaded').each(function () {
        var originalWidth = $(this).attr('width');
        var originalHeight = $(this).attr('height');
        var ratioH = originalWidth/originalHeight;
        var width = $(this).width();
        var height = width/ratioH;
        $(this).height(height);
    });
}

var $container = $('.masonry');
$container.imagesLoaded(function(){
    //change image height
    resizeBlankImages();
    //initialize masonry
    $container.masonry({
        transitionDuration: 0,
        itemSelector: 'article.bloc',
        columnWidth: 'article.w1'
    });
    //------XX-- lazyload --XX
    $('img.not-loaded').lazyload({
        effect: 'fadeIn', 
        threshold : 900,
        load: function() {
            $(this).removeClass("not-loaded");
                    //make image height auto again
        $(this).css('height', 'auto')
        }
    });
    $('img.not-loaded').trigger('scroll');

});

Now its work fine in every browser :-)

lazyload & masonry - difference firefox / webkit

1 Answers1