New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Masonry, isotope, packery images overlapping in Safari #671

Open
macsupport opened this Issue Jun 26, 2017 · 24 comments

Comments

@macsupport

macsupport commented Jun 26, 2017

There seems to be an issue with images loading and infinite scroll in Safari. On first load of your infinitescroll masonry demo, images are "behind" the colored blocks. On subsequent loads, the layout is as expected (After images are cached, it does not occur).
I can reproduce it using a new tab in Safari's "private window" setting consistently. Does not seem to occur in Firefox or Chrome.
screen shot 2017-06-26 at 8 20 16 am

Mike

@desandro desandro changed the title from Masonry, isotope, packery issue with images in Safari to Masonry, isotope, packery images overlapping in Safari Jun 26, 2017

@desandro desandro added the bug label Jun 26, 2017

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Jun 26, 2017

Member

Thanks for reporting this issue! I've seen this a couple times on mobile Safari as well. This is indeed a bug. I'll be investigating and working on a fix for the next release.

Member

desandro commented Jun 26, 2017

Thanks for reporting this issue! I've seen this a couple times on mobile Safari as well. This is indeed a bug. I'll be investigating and working on a fix for the next release.

@TaktakTaktouk

This comment has been minimized.

Show comment
Hide comment
@TaktakTaktouk

TaktakTaktouk Jul 27, 2017

I have exactly the same issue with Safari (mobile & desktop) you can take a look here http://keepgif.com

TaktakTaktouk commented Jul 27, 2017

I have exactly the same issue with Safari (mobile & desktop) you can take a look here http://keepgif.com

@jeehag

This comment has been minimized.

Show comment
Hide comment
@jeehag

jeehag Jul 29, 2017

I also have a same problem.
I hope this issue to be handled soon.
It's a awesome app! I will also appreciate your effort.

jeehag commented Jul 29, 2017

I also have a same problem.
I hope this issue to be handled soon.
It's a awesome app! I will also appreciate your effort.

@HughbertD

This comment has been minimized.

Show comment
Hide comment
@HughbertD

HughbertD Aug 1, 2017

👍 for same problem! Thanks for all your efforts!

HughbertD commented Aug 1, 2017

👍 for same problem! Thanks for all your efforts!

@mahsajafari67

This comment has been minimized.

Show comment
Hide comment
@mahsajafari67

mahsajafari67 Aug 15, 2017

hi..How to fix this problem?????

untitled-1
hi..How to fix this problem?????

mahsajafari67 commented Aug 15, 2017

hi..How to fix this problem?????

untitled-1
hi..How to fix this problem?????

@dariodev

This comment has been minimized.

Show comment
Hide comment
@dariodev

dariodev Aug 19, 2017

Something like this as a temporary solution?
Layout Packery after image loads - after items have been appended to the container.

$grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
	// layout Packery after each image loads
	$grid.imagesLoaded().progress( function() {
		$grid.packery('layout');
	});
});

dariodev commented Aug 19, 2017

Something like this as a temporary solution?
Layout Packery after image loads - after items have been appended to the container.

$grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
	// layout Packery after each image loads
	$grid.imagesLoaded().progress( function() {
		$grid.packery('layout');
	});
});
@riccardomel

This comment has been minimized.

Show comment
Hide comment
@riccardomel

riccardomel Sep 18, 2017

Hi, same issue, any fix suggestion or new release?

riccardomel commented Sep 18, 2017

Hi, same issue, any fix suggestion or new release?

@cPlayIt

This comment has been minimized.

Show comment
Hide comment
@cPlayIt

cPlayIt Sep 20, 2017

Like others have mentioned it happens when the images are not cached.. a lot of times they will be scattered and sometimes it happens in a way that poisons any future append.

img_5664
img_5665

anyone found a workaround in the mean time?

cPlayIt commented Sep 20, 2017

Like others have mentioned it happens when the images are not cached.. a lot of times they will be scattered and sometimes it happens in a way that poisons any future append.

img_5664
img_5665

anyone found a workaround in the mean time?

@riccardomel

This comment has been minimized.

Show comment
Hide comment
@riccardomel

riccardomel Sep 20, 2017

Hi, here a simple but working workaround:

NOTE: i use infinite scroll and masonry with vanilla javascript if you use jQuery is the same but check the official docs. In this example i load the next masonry grid using AJAX call

The problem: The issue is generated for an images cache problem in SAFARI only during append event in the infinte scroll plugin.

The solution:

 var grid = document.querySelector('.grid'); // the masonry grid 
  //START FIRST MASONRY STUFF
  var msnry = new Masonry( grid, {
    //Your masonry code
});

// initial items reveal
imagesLoaded( grid, function() {
  grid.classList.remove('are-images-unloaded');
  msnry.options.itemSelector = '.grid__item';
  var items = grid.querySelectorAll('.grid__item');
  msnry.appended( items );
});
 //END FIRST MASONRY GRID STUFF

  //START INFINITE SCROLL 
   var infScroll = new InfiniteScroll( grid, {
      //your setting code
    });

 // on append event of infinite scroll
 infScroll.on( 'append', function( response, path, items ) {
      
      //When  imagesLoaded on progress -->
     //hide the next populated masonry grid until it's everything ok

      imagesLoaded( grid ).on( 'progress', function() {
        // layout Masonry after each image loads
        grid.classList.add('are-images-unloaded');
        console.log("Append Item...wait the fix before show");
      });
     
      //When images loaded done event listener
      imagesLoaded( grid ).on( 'done', function() {
        console.log("Done loading..YO!");

        //Re-apply the layout masonry setting
        msnry.layout();  //the magic 
        //Now it's fixed, so show the new (fixed) grid of masonry items 
        grid.classList.remove('are-images-unloaded');
      });

  });//append infScroll

Hope this can be useful, thanks a lot, hope you can fix in the next release.
Riccardo Mel - riccardomel.com

riccardomel commented Sep 20, 2017

Hi, here a simple but working workaround:

NOTE: i use infinite scroll and masonry with vanilla javascript if you use jQuery is the same but check the official docs. In this example i load the next masonry grid using AJAX call

The problem: The issue is generated for an images cache problem in SAFARI only during append event in the infinte scroll plugin.

The solution:

 var grid = document.querySelector('.grid'); // the masonry grid 
  //START FIRST MASONRY STUFF
  var msnry = new Masonry( grid, {
    //Your masonry code
});

// initial items reveal
imagesLoaded( grid, function() {
  grid.classList.remove('are-images-unloaded');
  msnry.options.itemSelector = '.grid__item';
  var items = grid.querySelectorAll('.grid__item');
  msnry.appended( items );
});
 //END FIRST MASONRY GRID STUFF

  //START INFINITE SCROLL 
   var infScroll = new InfiniteScroll( grid, {
      //your setting code
    });

 // on append event of infinite scroll
 infScroll.on( 'append', function( response, path, items ) {
      
      //When  imagesLoaded on progress -->
     //hide the next populated masonry grid until it's everything ok

      imagesLoaded( grid ).on( 'progress', function() {
        // layout Masonry after each image loads
        grid.classList.add('are-images-unloaded');
        console.log("Append Item...wait the fix before show");
      });
     
      //When images loaded done event listener
      imagesLoaded( grid ).on( 'done', function() {
        console.log("Done loading..YO!");

        //Re-apply the layout masonry setting
        msnry.layout();  //the magic 
        //Now it's fixed, so show the new (fixed) grid of masonry items 
        grid.classList.remove('are-images-unloaded');
      });

  });//append infScroll

Hope this can be useful, thanks a lot, hope you can fix in the next release.
Riccardo Mel - riccardomel.com

@csillery

This comment has been minimized.

Show comment
Hide comment
@csillery

csillery Sep 20, 2017

@riccardomel Cool man, thanks.

csillery commented Sep 20, 2017

@riccardomel Cool man, thanks.

@jonXmack

This comment has been minimized.

Show comment
Hide comment
@jonXmack

jonXmack Sep 21, 2017

I found I didn't need to hide/show anything, so my code was quite a bit more simple, does the same thing though.

$('.blog-masonry').on( 'append.infiniteScroll', function( event, response, path, items ) {
	$('.blog-masonry').isotope('layout');
});

jonXmack commented Sep 21, 2017

I found I didn't need to hide/show anything, so my code was quite a bit more simple, does the same thing though.

$('.blog-masonry').on( 'append.infiniteScroll', function( event, response, path, items ) {
	$('.blog-masonry').isotope('layout');
});
@riccardomel

This comment has been minimized.

Show comment
Hide comment
@riccardomel

riccardomel Sep 21, 2017

Yes is the same, but with ajax-data the masonry.layout method "move" the cards of the masonry for a few second (the masonry block change position). My fix prevent also this issue.

riccardomel commented Sep 21, 2017

Yes is the same, but with ajax-data the masonry.layout method "move" the cards of the masonry for a few second (the masonry block change position). My fix prevent also this issue.

@jnz31

This comment has been minimized.

Show comment
Hide comment
@jnz31

jnz31 Oct 16, 2017

so i don't know, what the issue is, but there is one. in my case, i loaded the content via this infinite-scroll plugin and all my images returned with a height of 0. safari only. my css setting for images is max-width: 100%; height: auto; removing height auto showed the image. now i could set the height via js, but since they are responsive, i would have to do that on resize as well. possible, but.. why?
plus they lost their @2x high-res capability, so the srcset was there, but it wasn't working anymore. i guess.
and it's not a caching issue, no matter how often i did this, the height was 0.
i now load my content via my good old traditional way (my own ajax and wp-ajax (yeah i use wordpress but am not using the infinite-scroll wordpress-plugin)) and it works just fine..
so my guessing here is, that the html code returned from this is somewhat corrupted..? i compared the html from the both ajax calls images but they are identical, i don't see any difference whatsoever (i even made a code comparison). maybe its not the images itself but.. the injection? i don't know..
btw. i am not even using isotope, so maybe this is not the right thread to jump in, but.. dunno, maybe this is related..

jnz31 commented Oct 16, 2017

so i don't know, what the issue is, but there is one. in my case, i loaded the content via this infinite-scroll plugin and all my images returned with a height of 0. safari only. my css setting for images is max-width: 100%; height: auto; removing height auto showed the image. now i could set the height via js, but since they are responsive, i would have to do that on resize as well. possible, but.. why?
plus they lost their @2x high-res capability, so the srcset was there, but it wasn't working anymore. i guess.
and it's not a caching issue, no matter how often i did this, the height was 0.
i now load my content via my good old traditional way (my own ajax and wp-ajax (yeah i use wordpress but am not using the infinite-scroll wordpress-plugin)) and it works just fine..
so my guessing here is, that the html code returned from this is somewhat corrupted..? i compared the html from the both ajax calls images but they are identical, i don't see any difference whatsoever (i even made a code comparison). maybe its not the images itself but.. the injection? i don't know..
btw. i am not even using isotope, so maybe this is not the right thread to jump in, but.. dunno, maybe this is related..

@hambos22

This comment has been minimized.

Show comment
Hide comment
@hambos22

hambos22 Oct 19, 2017

@jnz31 I had the same issue with safari. The images returned with height 0. The solution was to have a plain, old time classic img without srcset and with width and height inline in the img tag

hambos22 commented Oct 19, 2017

@jnz31 I had the same issue with safari. The images returned with height 0. The solution was to have a plain, old time classic img without srcset and with width and height inline in the img tag

@schintu79

This comment has been minimized.

Show comment
Hide comment
@schintu79

schintu79 Nov 7, 2017

HI Guys. Has this issue been solved yet? I've got the same problem.
This is my code and in Safari (mostly mobile) it overlaps

$(document).ready(function ($) {
	'use strict';


	// init Isotope
	var $grid = $('.grid').isotope({
		itemSelector: '.grid-item',
		percentPosition: true,
		masonry: {
			columnWidth: '.grid-sizer'
		}
	});
	// filter functions
	var filterFns = {
		// show if number is greater than 50
		numberGreaterThan50: function () {
			var number = $(this).find('.number').text();
			return parseInt(number, 10) > 50;
		},
		// show if name ends with -ium
		ium: function () {
			var name = $(this).find('.name').text();
			return name.match(/ium$/);
		}
	};
	// bind filter button click
	$('.filters-button-group').on('click', 'button', function () {
		var filterValue = $(this).attr('data-filter');
		// use filterFn if matches value
		filterValue = filterFns[filterValue] || filterValue;
		$grid.isotope({
			filter: filterValue
		});
	});
	// change is-checked class on buttons
	$('.button-group').each(function (i, buttonGroup) {
		var $buttonGroup = $(buttonGroup);
		$buttonGroup.on('click', 'button', function () {
			$buttonGroup.find('.is-checked').removeClass('is-checked');
			$(this).addClass('is-checked');
		});
	});
	
	$grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
	// layout Packery after each image loads
	$grid.imagesLoaded().progress( function() {
		$grid.packery('layout');
	});
});
	
});

schintu79 commented Nov 7, 2017

HI Guys. Has this issue been solved yet? I've got the same problem.
This is my code and in Safari (mostly mobile) it overlaps

$(document).ready(function ($) {
	'use strict';


	// init Isotope
	var $grid = $('.grid').isotope({
		itemSelector: '.grid-item',
		percentPosition: true,
		masonry: {
			columnWidth: '.grid-sizer'
		}
	});
	// filter functions
	var filterFns = {
		// show if number is greater than 50
		numberGreaterThan50: function () {
			var number = $(this).find('.number').text();
			return parseInt(number, 10) > 50;
		},
		// show if name ends with -ium
		ium: function () {
			var name = $(this).find('.name').text();
			return name.match(/ium$/);
		}
	};
	// bind filter button click
	$('.filters-button-group').on('click', 'button', function () {
		var filterValue = $(this).attr('data-filter');
		// use filterFn if matches value
		filterValue = filterFns[filterValue] || filterValue;
		$grid.isotope({
			filter: filterValue
		});
	});
	// change is-checked class on buttons
	$('.button-group').each(function (i, buttonGroup) {
		var $buttonGroup = $(buttonGroup);
		$buttonGroup.on('click', 'button', function () {
			$buttonGroup.find('.is-checked').removeClass('is-checked');
			$(this).addClass('is-checked');
		});
	});
	
	$grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
	// layout Packery after each image loads
	$grid.imagesLoaded().progress( function() {
		$grid.packery('layout');
	});
});
	
});
@plue

This comment has been minimized.

Show comment
Hide comment
@plue

plue Dec 8, 2017

This works perfectly for me:

$(window).on('load', function(){ $grid.isotope('layout') });

Just put it after var $grid = $('.grid').isotope({ ...

plue commented Dec 8, 2017

This works perfectly for me:

$(window).on('load', function(){ $grid.isotope('layout') });

Just put it after var $grid = $('.grid').isotope({ ...

desandro added a commit to desandro/imagesloaded that referenced this issue Jan 2, 2018

🛠 check for non-zero naturalWidth
Fixes bug with Safari + InfiniteScroll + Masonry, metafizzy/infinite-scroll#671

👷 build v4.1.4

desandro added a commit that referenced this issue Jan 12, 2018

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Jan 12, 2018

Member

imagesLoaded v4.1.4 and Infinite Scroll v3.0.3 have been updated with a fix for this bug in Safari. Please try updating and report back if you run into any issues.

Thank you for your patience on this one. 🌈🐻

Member

desandro commented Jan 12, 2018

imagesLoaded v4.1.4 and Infinite Scroll v3.0.3 have been updated with a fix for this bug in Safari. Please try updating and report back if you run into any issues.

Thank you for your patience on this one. 🌈🐻

@daGUY

This comment has been minimized.

Show comment
Hide comment
@daGUY

daGUY Jan 19, 2018

Sorry to be the bearer of bad news, but I'm still seeing this issue with imagesLoaded 4.1.4 and Infinite Scroll 3.0.3 in Safari, both on macOS High Sierra and iOS 11.

I'm using both plugins in conjunction with Isotope, with Masonry as the layout mode, if that matters:

$articles.isotope({
    itemSelector: ".article",
    layoutMode: "masonry"
});

The best workaround I can come up with is to call isotope() again after the items are appended to force a re-layout:

$articles.on("append.infiniteScroll", function() {
    $articles.isotope();
});

daGUY commented Jan 19, 2018

Sorry to be the bearer of bad news, but I'm still seeing this issue with imagesLoaded 4.1.4 and Infinite Scroll 3.0.3 in Safari, both on macOS High Sierra and iOS 11.

I'm using both plugins in conjunction with Isotope, with Masonry as the layout mode, if that matters:

$articles.isotope({
    itemSelector: ".article",
    layoutMode: "masonry"
});

The best workaround I can come up with is to call isotope() again after the items are appended to force a re-layout:

$articles.on("append.infiniteScroll", function() {
    $articles.isotope();
});
@p-drolima

This comment has been minimized.

Show comment
Hide comment
@p-drolima

p-drolima Feb 15, 2018

hi desandro,

Is there a resolution for this issue? I see you didnt close it yet... and there is report afterwards also saying that is not resolved.

Could you possibly clarify?

Thank you

p-drolima commented Feb 15, 2018

hi desandro,

Is there a resolution for this issue? I see you didnt close it yet... and there is report afterwards also saying that is not resolved.

Could you possibly clarify?

Thank you

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Feb 16, 2018

Member

@p-drolima I'd like to this its fixed, as I am unable to reproduce the issue. I'm waiting to see if any other reports come in.

Member

desandro commented Feb 16, 2018

@p-drolima I'd like to this its fixed, as I am unable to reproduce the issue. I'm waiting to see if any other reports come in.

@JimmyAppelt

This comment has been minimized.

Show comment
Hide comment
@JimmyAppelt

JimmyAppelt Mar 7, 2018

Having same Safari issues with srcset (also on safari/chrome mobile) image do not load as per issue #732 where I have a suggested fix applied to get images finally loading.

Infinite Scroll 3.0.3 (using infinite-scroll.pkgd.js with included ImageLoaded as per documentation https://infinite-scroll.com/options.html#outlayer) in combination with packery as outlayer makes appending items with images overlapping (fairly unusable this way).

JimmyAppelt commented Mar 7, 2018

Having same Safari issues with srcset (also on safari/chrome mobile) image do not load as per issue #732 where I have a suggested fix applied to get images finally loading.

Infinite Scroll 3.0.3 (using infinite-scroll.pkgd.js with included ImageLoaded as per documentation https://infinite-scroll.com/options.html#outlayer) in combination with packery as outlayer makes appending items with images overlapping (fairly unusable this way).

@ralphmorris

This comment has been minimized.

Show comment
Hide comment
@ralphmorris

ralphmorris Mar 19, 2018

@desandro I had this same issue too on Safari with imagesLoaded v4.1.4 and Infinite Scroll v3.0.3. Fixed it with the by adding .imagesLoaded().progress at the beginning but then on append.InfiniteScroll event adding imagesLoaded().always

This works but not sure if its the best approach?

inspirationBoard.grid = $('.board-holder').isotope({
	itemSelector: '.board__block',
});

inspirationBoard.grid.imagesLoaded().progress( function() {

	inspirationBoard.grid.isotope('layout');
  
});

// get Isotope instance
var iso = inspirationBoard.grid.data('isotope');

// init Infinite Scroll
inspirationBoard.grid.infiniteScroll({
	append: '.grid__item',
	outlayer: iso,
	path: function() {

		var pageNumber = this.loadCount + 2;
		
		        return inspirationBoard.constructUrl() + 'page=' + pageNumber;
			
		}
	},
	append: '.board__block',
	history: false,
	scrollThreshold: 2000,
	hideNav: '.pagination',
	status: '.page-load-status'
});

inspirationBoard.grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
	
	inspirationBoard.grid.imagesLoaded().always( function() {

		inspirationBoard.grid.isotope('layout');
	  
	});

});

ralphmorris commented Mar 19, 2018

@desandro I had this same issue too on Safari with imagesLoaded v4.1.4 and Infinite Scroll v3.0.3. Fixed it with the by adding .imagesLoaded().progress at the beginning but then on append.InfiniteScroll event adding imagesLoaded().always

This works but not sure if its the best approach?

inspirationBoard.grid = $('.board-holder').isotope({
	itemSelector: '.board__block',
});

inspirationBoard.grid.imagesLoaded().progress( function() {

	inspirationBoard.grid.isotope('layout');
  
});

// get Isotope instance
var iso = inspirationBoard.grid.data('isotope');

// init Infinite Scroll
inspirationBoard.grid.infiniteScroll({
	append: '.grid__item',
	outlayer: iso,
	path: function() {

		var pageNumber = this.loadCount + 2;
		
		        return inspirationBoard.constructUrl() + 'page=' + pageNumber;
			
		}
	},
	append: '.board__block',
	history: false,
	scrollThreshold: 2000,
	hideNav: '.pagination',
	status: '.page-load-status'
});

inspirationBoard.grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
	
	inspirationBoard.grid.imagesLoaded().always( function() {

		inspirationBoard.grid.isotope('layout');
	  
	});

});
@p-drolima

This comment has been minimized.

Show comment
Hide comment
@p-drolima

p-drolima Apr 21, 2018

Hi, not sure if this can help anyone else's use case or not but as I was still struggling to find a solution for this I managed to find it finally.

jQuery(document).ready(function(){

    // Masonry grid var and options
    var $container = jQuery('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-width',
        stamp: '.stamp',
        gutter: 20,
        percentPosition: true,
        horizontalOrder: true,
        visibleStyle: { transform: 'translateY(0)', opacity: 1 },
        hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }
    });


    // get Masonry instance
    var msnry = $container.data('masonry');

     // Infinite Scroll options
    $container.infiniteScroll({
        path: '.pagination .next a',
        append: '.grid-item',
        outlayer: msnry,
        status: '.page-load-status',
        scrollThreshold: 600,
        loadOnScroll: false,
        hideNav: '.pagination',
        debug: true,
        //safari work around - this was one of the attempts but it didnt work on its own so I decided to 
        // leave it here just in case might help someone.
        onInit: function () {
            this.on( 'append', function( event, response, path, items ) {
                $container.imagesLoaded().done( function() {
                    $container.masonry();
                });

            });

        }
    });

    // initial items reveal
    $container.imagesLoaded( function() {
        $container.removeClass('are-images-unloaded');
        $container.masonry('layout');
    });

    jQuery('.view-more-button').click(function() {
        // load next page
        $container.infiniteScroll('loadNextPage', function(){
            // this was the breakthrough. after appending to grid do something rather than on load
            this.on('append.infiniteScroll', function(){
                $container.imagesLoaded().always( function() {
                    $container.masonry();
                });
            });
        });
        // enable loading on scroll
        $container.infiniteScroll( 'option', {
            loadOnScroll: true
        });
        // hide button
        jQuery('.view-more-button').hide();
    });

});

p-drolima commented Apr 21, 2018

Hi, not sure if this can help anyone else's use case or not but as I was still struggling to find a solution for this I managed to find it finally.

jQuery(document).ready(function(){

    // Masonry grid var and options
    var $container = jQuery('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-width',
        stamp: '.stamp',
        gutter: 20,
        percentPosition: true,
        horizontalOrder: true,
        visibleStyle: { transform: 'translateY(0)', opacity: 1 },
        hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }
    });


    // get Masonry instance
    var msnry = $container.data('masonry');

     // Infinite Scroll options
    $container.infiniteScroll({
        path: '.pagination .next a',
        append: '.grid-item',
        outlayer: msnry,
        status: '.page-load-status',
        scrollThreshold: 600,
        loadOnScroll: false,
        hideNav: '.pagination',
        debug: true,
        //safari work around - this was one of the attempts but it didnt work on its own so I decided to 
        // leave it here just in case might help someone.
        onInit: function () {
            this.on( 'append', function( event, response, path, items ) {
                $container.imagesLoaded().done( function() {
                    $container.masonry();
                });

            });

        }
    });

    // initial items reveal
    $container.imagesLoaded( function() {
        $container.removeClass('are-images-unloaded');
        $container.masonry('layout');
    });

    jQuery('.view-more-button').click(function() {
        // load next page
        $container.infiniteScroll('loadNextPage', function(){
            // this was the breakthrough. after appending to grid do something rather than on load
            this.on('append.infiniteScroll', function(){
                $container.imagesLoaded().always( function() {
                    $container.masonry();
                });
            });
        });
        // enable loading on scroll
        $container.infiniteScroll( 'option', {
            loadOnScroll: true
        });
        // hide button
        jQuery('.view-more-button').hide();
    });

});
@mheiduk

This comment has been minimized.

Show comment
Hide comment
@mheiduk

mheiduk May 1, 2018

Hi,

same problem here, images on Safari don't get loaded. Latest Safari Version on latest MacOS Version mit Masonry implemented. Have to use another Infinite Load Script because of this.

Best,
Marc

mheiduk commented May 1, 2018

Hi,

same problem here, images on Safari don't get loaded. Latest Safari Version on latest MacOS Version mit Masonry implemented. Have to use another Infinite Load Script because of this.

Best,
Marc

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment