« Edit History
Lazy Load Inages
Exposing bbcode to the plugin manager »

Offline live627

  • Consultants
  • Posts: 1,014
  • Took me forever to restyle a menu. And now, it loooks wonderful.
    • View profile
Lazy Load Inages
« on February 11th, 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)

Online Arantor

  • Wedgeward
  • Posts: 10,364
  • The Twelve Tasks of Asterix is awesome.
    • View profile
    • Innovate, not Imitate
Re: Lazy Load Inages
« Reply #1 on February 11th, 02:59 AM »
:whistle: http://wedge.org/pub/feat…s-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.
   computer-aided
   community building		             

Other stuff:

Offline live627

  • Consultants
  • Posts: 1,014
  • Took me forever to restyle a menu. And now, it loooks wonderful.
    • View profile
Re: Lazy Load Inages
« Reply #2 on February 11th, 04:25 AM »
Quote from Arantor on February 11th, 02:59 AM
:whistle: http://wedge.org/pub/feat…s-from-the-oddest-places/
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.

Online Nao

  • Wedgeward
  • Posts: 10,277
  • Reality check: I just discovered that Wedge already has a 'Mark unread' button for PMs, a feature in my to-do. Uh. It just isn't in the 'right' place...
    • View profile
    • Cynacittà @ noisen
Re: Lazy Load Inages
« Reply #3 on February 11th, 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... :^^;:
  I say Wedge Wedge (in the butt)
« Everyone knows rock attained perfection in 1974. It's a scientific fact. » (Homer Simpson)

Online Arantor

  • Wedgeward
  • Posts: 10,364
  • The Twelve Tasks of Asterix is awesome.
    • View profile
    • Innovate, not Imitate
Re: Lazy Load Inages
« Reply #4 on February 11th, 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.
   computer-aided
   community building		             

Other stuff:

Online Nao

  • Wedgeward
  • Posts: 10,277
  • Reality check: I just discovered that Wedge already has a 'Mark unread' button for PMs, a feature in my to-do. Uh. It just isn't in the 'right' place...
    • View profile
    • Cynacittà @ noisen
Re: Lazy Load Inages
« Reply #5 on February 11th, 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
  I say Wedge Wedge (in the butt)
« Everyone knows rock attained perfection in 1974. It's a scientific fact. » (Homer Simpson)

Online Arantor

  • Wedgeward
  • Posts: 10,364
  • The Twelve Tasks of Asterix is awesome.
    • View profile
    • Innovate, not Imitate
Re: Lazy Load Inages
« Reply #6 on February 11th, 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.
   computer-aided
   community building		             

Other stuff:

Offline Norodo

  • Friends
  • Posts: 267
  • Wedge and Mini Babybel. The only good reasons to like France.
    • View profile
Re: Lazy Load Inages
« Reply #7 on February 11th, 06:19 PM »
Quote from Nao on February 11th, 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, 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.
read/shoeonhead

Online Nao

  • Wedgeward
  • Posts: 10,277
  • Reality check: I just discovered that Wedge already has a 'Mark unread' button for PMs, a feature in my to-do. Uh. It just isn't in the 'right' place...
    • View profile
    • Cynacittà @ noisen
Re: Lazy Load Inages
« Reply #8 on February 13th, 06:19 PM »
Quote from Norodo on February 11th, 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.
  I say Wedge Wedge (in the butt)
« Everyone knows rock attained perfection in 1974. It's a scientific fact. » (Homer Simpson)
« Edit History
Exposing bbcode to the plugin manager »