« Optional hooks
Lazy Load Inages
Crazy plugin-related idea I just had »

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670
Lazy Load Inages
« on February 11th, 2012, 02:37 AM »
I got this idea from http://www.appelsiini.net/projects/lazyload (actually, I saw jQuery website's avatars  do this). So I decided to make a plugin for Wedge that does just this.

What it does (or will do, as I didn't write it yet) is hook into the buffer, find all img tags with a regex, use data-src for the image link, put a blank grey image as its src, and wrap noscript tags around a copy of the original img tags to not leave noscript users in the cold. Then the jquery changes data-src to src when it is scrolled into view, vertically or horizontally.

And I also  attacked the script to remove unneeded cruft. Now, it is a nice 277 bytes once minified and gzipped. (2KB uncompressed)
A confident man keeps quiet.whereas a frightened man keeps talking, hiding his fear.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Lazy Load Inages
« Reply #1, on February 11th, 2012, 02:59 AM »
:whistle: http://wedge.org/pub/feats/7001/ideas-from-the-oddest-places/

In our case, the real bulk of images that this will affect are user supplied (pretty much all the base images are CSS driven), but I suppose it might make a difference.

Note that data-src is not wonderfully supported (IE, Imma looking atchu) but the idea is certainly worth experimenting with.

Also, please let me know if you have trouble with the buffer hook, because it's a buffer not a conventional hook and I have a slightly funny feeling it may not work properly.
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670
Re: Lazy Load Inages
« Reply #2, on February 11th, 2012, 04:25 AM »
Quote from Arantor on February 11th, 2012, 02:59 AM
Is there anything you have NOT discussed?? Oo
Quote
In our case, the real bulk of images that this will affect are user supplied (pretty much all the base images are CSS driven), but I suppose it might make a difference.
Ooh, the gallery is big on that.
Quote
Note that data-src is not wonderfully supported (IE, Imma looking atchu) but the idea is certainly worth experimenting with.
The original uses data-original, but the same principle. It works in IE8, so I'll probably turn it off for 7 and below.
Quote
Also, please let me know if you have trouble with the buffer hook, because it's a buffer not a conventional hook and I have a slightly funny feeling it may not work properly.
Oh yes, I'll let you know.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Lazy Load Inages
« Reply #3, on February 11th, 2012, 08:57 AM »
How could data-src not work well on IE..? I mean, any single inline event in Wedge is driven by a data-eve... :^^;:

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Lazy Load Inages
« Reply #4, on February 11th, 2012, 02:36 PM »
Quote
Is there anything you have NOT discussed?? Oo
Oh, sure, there are things not discussed, but it's interesting to note when things have been mentioned before, too.
Quote
How could data-src not work well on IE..?
Meh, I was thinking of something else (data:// URL for encoding an image inline) which isn't so well supported, ignore me.
Quote
Ooh, the gallery is big on that.
It is, but I'm not clear on exactly how much benefit you'd get when you're serving typically 5-6 images lazily versus everything else via CSS.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Lazy Load Inages
« Reply #5, on February 11th, 2012, 04:55 PM »
data:uri is only not supported in IE6 and IE7, and it never broke anything since Wedge just skips conversion for them :)

Oh gosh, the latest .Net issue (which arrived today at the same time as my Web Designer Mag issue, could you guys please avoid doing that? I'd rather have them two weeks apart thank you very much :P), they're discussing LESS in their "CSS hacks" pages, and again in their developer pages, to give examples etc...
Did ANYONE tell them that not everyone cares about installing Ruby (SASS) or Node.js (LESS) on their server?! :P
Perhaps I should release WeCSS as an open-source library for everyone to use... Then maybe .Net would be willing to discuss Wedge at all when we go gold :P

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Lazy Load Inages
« Reply #6, on February 11th, 2012, 05:05 PM »
Installing Node.js on a server is a non trivial task, far more so than Ruby is - because Node.js isn't a drop-in for Apache or similar (unless they're doing something funkyweird in it) but that it conceptually IS the webserver as well as the application.

Norodo

  • Oh you Baidu, so randumb. (60 sites being indexed at once? Jeez)
  • Posts: 469
Re: Lazy Load Inages
« Reply #7, on February 11th, 2012, 06:19 PM »
Quote from Nao on February 11th, 2012, 04:55 PM
Did ANYONE tell them that not everyone cares about installing Ruby (SASS) or Node.js (LESS) on their server?! :P
Very true!
Quote from Nao on February 11th, 2012, 04:55 PM
Perhaps I should release WeCSS as an open-source library for everyone to use... Then maybe .Net would be willing to discuss Wedge at all when we go gold :P
This would be an act of good faith, and I think it is a good idea. Make sure however that this does not burden your time considerably.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Lazy Load Inages
« Reply #8, on February 13th, 2012, 06:19 PM »
Quote from Norodo on February 11th, 2012, 06:19 PM
This would be an act of good faith, and I think it is a good idea. Make sure however that this does not burden your time considerably.
Time is the main problem indeed...

If someone else was willing to manage the project, then I could consider doing it.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Lazy Load Inages
« Reply #10, on June 4th, 2012, 10:27 PM »
I'm pretty much anti-laziness myself when it comes to images. It has its uses but mostly in an infinitely scrolling page.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
« Optional hooks
Crazy plugin-related idea I just had »