Masonry, infinite scrolling and Django
brack3t.com
Masonry, infinite scrolling and Django
1–10 of 13 posts
Re: Masonry, infinite scrolling and Django
#2Did I miss the link to the example showing it in action? Or is that left as an exercise for the student?
Re: Masonry, infinite scrolling and Django
#3Did I miss the link to the example showing it in action? Or is that left as an exercise for the student?
---There's no demo because it behaves exactly like the Masonry example for infinite scrolling and Pinterest.---
Screw it, I added a link to the example. It's on tindie.com.
Re: Masonry, infinite scrolling and Django
#4Oh nice, the best takeaway from this (for me) was that desandro apparently has created a hack to deal with the whole is-an-image-in-cache-or-isn't-it problem:
Re: Masonry, infinite scrolling and Django
#5Oh nice, the best takeaway from this (for me) was that desandro apparently has created a hack to deal with the whole is-an-image-in-cache-or-isn't-it problem: https://github.com/desandro/imagesloaded
The best way to avoid this altogether is to set the image width and height in the img tag. That way, content can be shown right away, even before the images are loaded.
Another thing to be careful with are social buttons, whose height may change after the initial item is rendered. That's easily avoided with a fixed CSS height, though.
Re: Masonry, infinite scrolling and Django
#6Oh nice, the best takeaway from this (for me) was that desandro apparently has created a hack to deal with the whole is-an-image-in-cache-or-isn't-it problem: https://github.com/desandro/imagesloaded
The best way to avoid this altogether is to set the image width and height in the img tag. That way, content can be shown right away, even before the images are loaded. Another thing to be careful with are social buttons, whose height may change after the initial item is rendered. That's easily avoided with a fixed CSS height, though.
Yes. We specify a height and width in the HTML and the CSS, but it's still nice to pay attention to the images' loaded status.
Re: Masonry, infinite scrolling and Django
#7Oh nice, the best takeaway from this (for me) was that desandro apparently has created a hack to deal with the whole is-an-image-in-cache-or-isn't-it problem: https://github.com/desandro/imagesloaded
The best way to avoid this altogether is to set the image width and height in the img tag. That way, content can be shown right away, even before the images are loaded. Another thing to be careful with are social buttons, whose height may change after the initial item is rendered. That's easily avoided with a fixed CSS height, though.
It depends on the backend workflow, no? If your system pulls in images and does the resizing, including the determination of horizontal vs. vertical, then outputting defined css selectors is straightforward.
However, if you're only in control of the front-end and are just reading from an API of photos where you're given a stream of image urls...how do you determine which css-selector (i.e. '.vert-image' and 'horz-image' with defined h/w dimensions) to put out? You can obviously just restrict everything to a one-size box, but either the vertical or the horizontal images are going to be given short shrift.
Re: Masonry, infinite scrolling and Django
#8The example page (Tindie) is slow and chunky-scrolling on latest Firefox with my machine (16 gigs of RAM and quad Xeon)... It eats CPU. Something wrong with it. Doesn't happen in Chrome.
I like the typography on the blog, though.
Re: Masonry, infinite scrolling and Django
#9One of the things i've recently built has an infinite scrolly feed of items, and http://airbnb.github.com/infinity/ is what I ended up using after using Masonry for a long time.
Edit: along with Scroll Events http://james.padolsey.com/demos/scrollevents/
Re: Masonry, infinite scrolling and Django
#10This is awesome read! Thanks