{"id":8130,"date":"2015-11-28T00:50:39","date_gmt":"2015-11-28T00:50:39","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/11\/28\/combining-lazyload-and-jquery-masonry-open-source-projects-desandro-masonry\/"},"modified":"2022-08-30T15:51:28","modified_gmt":"2022-08-30T15:51:28","slug":"combining-lazyload-and-jquery-masonry-open-source-projects-desandro-masonry","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/11\/28\/combining-lazyload-and-jquery-masonry-open-source-projects-desandro-masonry\/","title":{"rendered":"Combining LazyLoad and Jquery Masonry-open source projects desandro\/masonry"},"content":{"rendered":"<p>Recently, I gotta solve this for one of my website. I have tried a couple of ways and it seems working.<\/p>\n<p><strong>1. First Method:<\/strong><\/p>\n<ul>\n<li>Load masonry on the items<\/li>\n<li>Put a place holder on all images and use lazyload on them<\/li>\n<li>Now, when each image fire lazyload.load callback, reload masonry -&gt; a series of masonry(&#8216;reload&#8217;) [Updated jsfiddle with new images, easier to illustrate the point]<\/li>\n<\/ul>\n<p>http:\/\/jsfiddle.net\/7vEJM\/8\/<\/p>\n<pre><code>var $container = $('#container');\n$container.imagesLoaded(function(){\n    $container.masonry({\n        itemSelector: '.item',\n        columnWidth: function(containerWidth){\n            return containerWidth \/ 12;\n        }\n    });\n    $('.item img').addClass('not-loaded');\n    $('.item img.not-loaded').lazyload({\n        effect: 'fadeIn',\n        load: function() {\n            \/\/ Disable trigger on this image\n            $(this).removeClass(\"not-loaded\");\n            $container.masonry('reload');\n        }\n    });\n    $('.item img.not-loaded').trigger('scroll');\n});\n<\/code><\/pre>\n<p>This method is good, but it has one disadvantage. The grid layout might not be kept the same since the time of masonry.reload() depends on each image&#8217;s load time (i.e. the one supposed to be loaded first might only finish later)<\/p>\n<p><strong>2. Second Method:<\/strong> Look at sites like pinterest, i think, it does not follow the first method, because they have the container boxes arranged even before any image loaded, therefore, what I tried to achieve is to display just the boxes with same ratio as the images. The steps are:<\/p>\n<ul>\n<li>Pass your images dimension (just return a json like <code>{image1: [300,400],image2: [400,500]}<\/code> )<\/li>\n<li>Use CSS trick to make div box resize according to container. I found that trick here<\/li>\n<li>Lazy load like normal, no need to trigger any reload since now, without the image, the boxes are alr arranged correctly<\/li>\n<\/ul>\n<p>http:\/\/jsfiddle.net\/nathando\/s3KPn\/4\/<\/p>\n<pre><code>var $container = $('#container');\n$container.imagesLoaded(function(){\n    $container.masonry({\n        itemSelector: '.item',\n        columnWidth: function(containerWidth){\n            return containerWidth \/ 12;\n        }\n    });\n    $('.item img').lazyload({\n        effect: 'fadeIn'\n    });\n    $('.item img').trigger('scroll');\n});\n<\/code><\/pre>\n<p>[Edited to add the jsfiddle for the second method]<\/p>\n<p>Notice:<\/p>\n<ul>\n<li>In this fiddle, I manually put in the height\/width ratio of each image in &#8216;padding-bottom: xxx%&#8217; which should be passed in from your server code (refer to step 1)<\/li>\n<li>Added in a border to make boxes visible<\/li>\n<li>To illustrate that the boxes will be arranged even when the images not loaded, try uncomment <code>\/*display: none *\/<\/code> and comment <code>display: block<\/code> for <code>#container.fluid .item img<\/code><\/li>\n<\/ul>\n<p>Cheers<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently, I gotta solve this for one of my website. I have tried a couple of ways and it seems working. 1. First Method: Load masonry on the items Put a place holder on all images and use lazyload on them Now, when each image fire lazyload.load callback, reload masonry -&gt; a series of masonry(&#8216;reload&#8217;) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8130","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=8130"}],"version-history":[{"count":2,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8130\/revisions"}],"predecessor-version":[{"id":9056,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8130\/revisions\/9056"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=8130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=8130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=8130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}