From a chat in #drupal-omega

cellar-door
3:14 well jbeach just mentioned in groups how lazy loading the images etc. would help with the data load on the client side and it clicked for me that this could be tied into the mediaqueries.js to enable lazy loading of blocks, regions etc. just like context
cellar-door
3:14 it would be a server-side setting for a client-side aware loading
banghouse
3:14 sweet
cellar-door
3:14 exactly what we've been trying to figure out how to do!
banghouse
3:14 ok so let me know when you've got it built
3:15
3:15 recidive [~henrique@dynamic-189-84-2-144.v4.onda.net.br] entered the room.
jbeach
3:15 right right.
3:15 You wouldn't want to do this for the page node
3:15 just for ancillary content
3:16 because it's going to be hidden from search bots
cellar-door
3:16 hahaha….. well I may start working on it
jbeach
3:16 the way I'm thinking about it, it wouldn't necessarily solve the image size issue
cellar-door
3:17 no it would though!
3:17 the ajax would be media-query aware
banghouse
3:17 how so
jbeach
3:17 but it would solve the "don't load 150 comments" on my mobile device issue
3:17 cellar-door is obviously being more expansive in dreaming
cellar-door
3:17 thus if you go in and do a rewrite of all images to a certain folder on the server for that image cache you'd have it
3:17 man my mind is reeling right now!
3:18 here's what it'd do:
jbeach
3:18 *listening*
banghouse
3:18 all ears
cellar-door
3:18 1. the AJAX would look for the media query triggers that are in omega
3:19 2. on receiving the trigger it would then load the ancillary content (blocks etc.) for that media query as defined by the settings for those blocks
3:19 3. it would then append the image strings for the correct folder for that media query size
3:20 thus all images that are lazy loaded after the firing of a media query would get the pathway /files/public/(mediaquery)/file.jpg
3:20 if you setup imagecache to create the images in the folder structure you'd have it
jbeach
3:20 and fall back to the smallest image in the fail case
cellar-door
3:20 bingo
jbeach
3:20 sounds like a great approach
cellar-door
3:21 you would set the image to be loading the smallest at all times
3:21 then if the media query comes back as desktop you would then load it after the fact with the larger image
3:21 for the desktop user this would be a fraction of a second in loading
3:22 I'll collect my thoughts and post to the blueskying thread to see what they think of it
3:22 it almost sounds too good and too easy to be true

Comments

sokrplare’s picture

sokrplare commented

Anyone moving anywhere on this? We need it for a site currently in progress so didn't want to duplicate work.

marcoka’s picture

marcoka commented

what about
http://drupal.org/project/lazy_image_loader

sokrplare’s picture

sokrplare commented

Nice first step, now would just need to make that module media-query aware for lazy loading them. I'm trying to do something similar with http://drupal.org/project/ajaxblocks. I personally care more about the "load the ancillary content (blocks etc.) for that media query as defined by the settings for those blocks" part of the issue description conversation than image loading, but I know both are needed for many sites.

cellar door’s picture

cellar door commented

I remember this conversation, I had a whole module schematic worked up for it on paper too (and on my whole desk at one point). I still think this could/should work pretty well but unfortunately I'm not a module guy and so my idea ends there.

If anyone is willing to help w/ the coding of the module let's talk as I've got the whole schematics etc. for this to work. What if we did this as a D-Con sprint! How good would that be to come out of it!