lazy loading for images via css

Hi there.

I'd like to bring this for discussion and see what you think about it, or
if could get possible some day, somehow!

I want to be able to implement the lazy loading technique for images, via
css!
I mean, nowadays websites use it to avoid unnecessary image loadings...but
they sacrifice(a lot of) the performance! It's a javascript running for
each scroll event, usually running through all the images in a loop to see
which ones are in the current visible viewport! (it is terrible or is it
just me?!)

I believe we could add to image elements, something like
the loading-type attribute...

article img{
    loading-type: postponed;
}

let's say it could accept some interesting values, like:
postponed - to be loaded only when the loading-type attribute is changed to
normal
Xms/Xs    - to be loaded after some time
normal      - load it as soon as possible(default)
after         - after the whole page has been loaded

Some relevant points:
- I know images are loaded side-by-side with CSSs...this would work for css
as the style attribute in the image or inline in the page, or when images
are added to the page after the css has loaded;
- the image src would be already there..good for search engine indexation;
- very useful for mobile development
- would help a lot about that "images for responsive pages" matter...once
developers would have "time" to change the image src(via js, maybe) before
the image has loaded in a bigger size;
- many, MANY images(and why not objects and iframes?) are loaded for Ads,
in pages! This way we would be able to prioritise the content, leaving the
ads to be loaded afterwards...specially, after the user has recognised
exactly where main the will be;

What you think?
Is this as ridiculous as it sounds?
Maybe, there is another way to bring this to the CSS and run it straight in
the browser layer, instead of having a trillion different javascript libs
and pages doing the same thing in a bad way?

Cheers.

-- 
*Felipe N. Moura*
Senior Web Developer

Website:  http://felipenmoura.org
 Twitter:    @felipenmoura <http://twitter.com/felipenmoura>
LinkedIn: http://goo.gl/qGmq

Meet some of my projects:
BrazilJS Conference <http://braziljs.com.br/>  |  BrazilJS
Foundation<http://braziljs.org>
|  Power Polygon <http://github.com/braziljs/power-polygon>  |
TheWebMind<http://thewebmind.org/>  |
PHPDevBar<https://addons.mozilla.org/pt-BR/firefox/addon/php-developer-toolbar/>
---------------------------------
LinuxUser #508332
*Changing  the  world*  is the least I expect from  myself!

Received on Friday, 28 June 2013 03:55:19 UTC