Isotope + Lazyload: image size

Question

Two things to keep in mind before I expose my problem: 1. I'm not a programmer, therefore I have NO IDEA of what I'm doing 2. Talk to me like I'm stupid, and be very very patient (see 1.)

Alright, there are about a million things wrong in the way the site is set up, but right now I'm just trying to make Isotope work with Lazyload. I've probably read every single stackoverflow on the issue but so far I haven't been able to solve my problem. I'm using Stacey as CMS. Basically, what I'm trying to achieve is similar to xxx.aestheticallyloyal.com (or in fact, www.imageworkshop.com/lazyload-portfolio), but with clickable thumbnails arranged Isotope/Masonry style that open in their respective project pages. I tried getting Infinitescroll to work but I'm not entierely sure pagination is supported in Stacey, therefore I gave up on that. Enter Lazyload.

I got Isotope to work fine. I can get Lazyload to work fine, separatedly. But whenever I try to mix the two, I fail miserably. The problem is that the images are organized by Isotope before they're fully loaded, therefore they don't get aligned according to their actual size (which is variable) but get a fixed width and height (I'm ok with fixed width, that's the point, but height should scale accordingly). If I resize the window after that, though, the grid is adjusted accordingly, as it should.

This is the code I'm working with:

    <script>
$(function () {
    var $window = $(window);
    var $container = $('#container');
    var $imgs = $("img.lazy");

    $imgs.lazyload({
        event: 'scroll',
        effect: 'fadeIn',
        failure_limit: Math.max($imgs.length - 1, 0),
        appear: function () {}
    });

    $(function () {
        $container.imagesLoaded(function () {
            $container.isotope({
                onLayout: function () {
                    $window.trigger("scroll");
                },
                itemSelector: '.photo'
            });
        });
    });

    $window.load(function () {
        $container.isotope('reLayout');
    });
});
    </script>

It's probably wrong in so many ways... I don't know. Plus, as is, I think reLayout is doing absolutely nothing, and from there I really don't know where to go anyway. Can anybody have a look at my site flow.blukaet.com and let me know how to sort this mess? (Nevermind the menu on the left, I haven't even begun looking at that). Thanks.

UPDATE #1

I've been trying to use a different Lazyload script called Fasterize. Things seem to fare only marginally better, but I'm still having problems displaying the images that appear below the fold in a correct manner. Basically anything that loads in the viewport gets sorted fine by Isotope, but the remaining images don't get added based on their actual, final, visible size. I'd need to trigger something in Isotope to make it rearrange the new items after they are loaded. I don't know if it's possible at all. Can anybody help? Here's the site where you can see what's going on: flow.blukaet.com (The code above is no longer actual).

UPDATE #2

So this is the amended code thanks to the answer provided below (also, this is using fasterize/lazyload as opposed to appelsiini's lazyload):

<script>
$(window).load(function () {

var $container = $('#container');
var $imgs = $("img");

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: '.photo'
    });
});

$(window).scroll(function () {
    $container.isotope('reLayout');
});
});
</script>

It's not super smooth, but it gets the job done.

Previously I tried something along the lines of:

<script>
$(function () {

var $container = $('#container');
var $imgs = $("img");

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: '.photo'
    });
});

$imgs.load(function () {
    $container.isotope('reLayout');
});
});
</script>

Which actually ran much smoother, but somehow was giving the following console error:

cannot call methods on isotope prior to initialization; attempted to call method 'reLayout'

So I don't know.

Another thing to note is that the code works in FF and Opera. Apparently Safari ignores lazyloading altogether. I haven't tested in Chrome and IE. If anybody wants to check out: flow.blukaet.com

to maybe push things in the right direction, this topic discusses more or less a similar thing http://stackoverflow.com/questions/12451641/how-to-change-the-css-after-image-lazy-loading-jquery too bad I can't seem to grasp how to make this work. can anybody help? — hooverfocus, Feb 07 '13 at 00:17
still reasoning on this... the problem, I think, is that Isotope needs a specified height, which doesn't happen until the actual image (called in data-original, not src) is loaded by Lazyload. I think it'd be ok if Isotope reloaded/rearranged itself after the images become visible, but I don't know how to make it do so. — hooverfocus, Feb 07 '13 at 21:46

score 6 · Accepted Answer · answered Feb 17 '13 at 23:51

Huzzah! I think we have a final winner. I tinkered some more that half-solution I found — through trial and error, mind you, because I still haven't a clue about what I'm doing — and I think I finally got this right. The console is no longer returning the initialization error and the code seems to behave more or less correctly (I think?!).

<script>
$(document).ready(function () {

    var $container = $('#container');
    var $imgs = $("img");

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.photo'
        });
        $imgs.load(function () {
            $container.isotope('reLayout');
        }); 
    });
});
</script>

So 'reLayout' doesn't happen on scroll but when the images load, this way they won't get stuck if the scrolling doesn't go the whole way through.

In Safari Lazyload still does whatever it wants, and as usual I couldn't test on Chrome and IE, but in FF and Opera it seems to be ok. Check flow.blukaet.com for a working example.

Thank you. This was a life saver for me. – Sahat Yalkabov Sep 25 '13 at 02:32 — Sahat Yalkabov, Sep 25 '13 at 02:32

score 3 · Answer 2 · answered Feb 17 '13 at 20:24

3

I have the same problem with a responsive grid. Check this image, the grid is okay on the left and broken on the right.

enter image description here

Grid is broken because specific height for image is needed and the responsive process pass the height value into "auto".

So here we have to relayout when images are loaded (giving specific height to process).

For now the solution I find is to relayout on scrool:

$(window).scroll(function() {
        $container.isotope('reLayout');
});

but I'm sure there is a better way to do this.

And try freetile for the grid, found it great and lighter than others. http://yconst.com/web/freetile/

answered Feb 17 '13 at 20:24

jjj

895
8
22

Thank you! Last night I fiddled a bit more and ended up using $imgs.load(function() { $container.isotope('reLayout'); }); This bit of code works but then the console gives out an error. I don't know. Your code does work indeed, but first time up the images don't get sorted until you actually scroll the window. – hooverfocus Feb 17 '13 at 21:26
Hmm, I tinkered a bit more (on localhost, so the link I provided hasn't been updated yet) and wrapping $(window).load around the whole thing seems to fix the issue. Also, my solutions seemed to be smoother but gave that console error, whereas your solution works without console glitches, although sometimes the tiles get stuck until you give it a further scroll, but I can live with that I guess! I'll update the post with the code. Works in FF and Opera, Safari seems to ignore the lazyload/fasterize thing no matter what, IE & Chrome untested. – hooverfocus Feb 17 '13 at 21:38
Please dont forget to give a vote for my answer, that will help others people. – jjj Feb 17 '13 at 21:47
I've tried to vote you up but it says I need 15 reputation in order to do so! – hooverfocus Feb 17 '13 at 22:07

score 0 · Answer 3 · answered Aug 21 '13 at 15:02

While I had the same problem and was unable to solve, I realized it's just a warning. So I simply disabled it by commenting off the console log line in the file "jquery.isotope.min.js" (or jquery.isotope.js)

var logError = function( message ) {
  if ( window.console ) {
    //window.console.error( message );
  }
};

Isotope + Lazyload: image size

3 Answers3