Ask your JavaScript questions! Pay money and get answers fast! (more info)

Unable to get Masonry and Lazy Load to work JavaScript


I am setting up a site for a photographer. He wants to have a masonry with over 400 images on one page. For this to work Lazy Load is a must. I have now spent several days trying to get Lazyload to work with Desandros masonry but with no success..

I've tried most of the examples that one finds goggling, but most sites redirect you, or have copied this stackoverflow answer:

I've tried both:

unfortunately I get nothing but grey hair..... :(

Here is the page im working on:
At the moment I have removed the lazyload so that the page would run

Any help would be highly appreciated

Answers (1)


Ross Wilson answers:

I did something similar on this page: [[LINK href=""]][[/LINK]], but I didn't use the lazy load plugin, I just kinda wrote my own.

Basically the page loads with just 20 images, then a query is done to a service to get info for all of the images in json format. From there as you scroll down the page, when you get within 200px of the bottom it takes the next 20 images off the array of posts (from the json response) and adds them to masonry.

Code looks like this:

var $container, $masonry, posts;
var $postOffset = 20;
var isLoading = false;
$(window).load(function() {
$container = $('#posts');
$container.masonry({itemSelector: '.post',columnWidth: 240});
$masonry = $'masonry');
function loadPosts() {
if (isLoading) {
if (!posts) {
$.getJSON('/posts/page.json').fail(function() {
alert("Error loading images, please refresh")
}).done(function(data) {
posts = data;
$(window).scroll(function() {
if ($(window).scrollTop() + 200 >= $(document).height() - $(window).height()) {
isLoading = true;
function showPosts(num) {
if ($postOffset >= posts.length) {
data = posts.slice($postOffset, $postOffset + num);
$postOffset += num;
var fragment = document.createDocumentFragment();
for (var i = 0, len = data.length; i < len; i++) {
var item = makePostItem(data[i]);
imagesLoaded(fragment).on('progress', function(imgLoad, image) {
var item = $(image.img).closest('.post');
function makePostItem(dataObj) {
var item = document.createElement('div');
item.className = 'post grid_3';
var link = document.createElement('a');
link.href = '/posts/' + dataObj._id;
var img = document.createElement('img');
img.src = '' + dataObj._id + '/medium.jpg?' + dataObj.post_image_file_size;
img.alt = dataObj.title;
return item;

no0ne comments:

Hi Ross, thank you for the effort.
I am however unable to get your code to work, or anything else for that matter... :(
I've posted a question on Stackoverflow conserning this same issue, have a look it I go to great length to explain my self and showing different methods tha tdo not work.

Ross Wilson comments:

You might also need to load the latest version of imagesLoaded, I am not sure the old version included in masonry can do detection on elements, just images. Add this script below your masonry script. Also in example 5 and 6 you posted you should wrap your code in a $(document).ready block so it doesn't execute before your scripts are loaded.

Ross Wilson comments:

Actually, masonry 3 doesnt include imagesloaded at all [[LINK href=""]][[/LINK]]