Re: lazy loading for images via css

On Fri, Jun 28, 2013 at 8:04 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Fri, Jun 28, 2013 at 2:47 PM, Felipe Nascimento de Moura
> <felipenmoura@gmail.com> wrote:
> > Hi.
> > Yes, that's true, although most of(if not 99%) implementations "out
> there"
> > do it the bad way :/
> > Brice Parent gave another interesting idea, of using
> > async="none|async|postponed|..." in loadable elements(such as images,
> > object, video, iframe...) as an attribute, like
> > <img src="photo.png" alt="photo!" postponed/>
>
> Please don't "top-post". <http://wiki.csswg.org/tools/www-style>
>
>
sorry!


>  > In this case, I believe we should discuss it with HTML list's people,
> right?
>
> Yup, and I think there's already been some discussion about that.
> Send mail to <whatwg@whatwg.org>.
>
>
sending the ideas right now, thanks



>  > Also, it would be really interesting to use as another background
> > characteristic, as proposed by Sebastian Zartner.
> > Like
> > background-image: url(mygreatestphoto.jpg) postponed;
> > or
> > background-load-method: postponed;
> >
> > With that, we would even be able to say that:
> >
> > body.mobile div{
> >      background-load-method: postponed;
> > }
> >
> > this way, a server side application could write the body tag with or
> without
> > the "mobile" class, therefore, all the div elements with background
> images
> > would be postponed to load their background.
>
> Yeah, I'm potentially interested in pursuing something to indicate a
> lazy-loaded image in CSS as well.  We can bake it into image(), which
> is designed to have its set of annotations expanded over time.
> "background-image: image(defer "foo.jpg");" or the like.
>
> ~TJ
>

interesting...that could also be an option!
although I still think it would be easier, or simpler to use something like

body.mobile div{
     background-load-method: postponed;
}

For situations like that, we are not specifying the image itself, just
saying(in a more "cascade" mode) how backgrounds for those selectors should
behave!

Supporting background-image: image(postponed "foo.jpg"); would, indeed, be
other great option to specify the same property.

Therefore, I think it would be highly adopted by developers if browsers
could support all
background-load-method: postponed;
background-image: url(mygreatestphoto.jpg) postponed;
background-image: image(postponed "foo.png");

What you think?




-- 
*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!