The problem is, this is just an idea for something that the author thinks would be nice to have in CSS one day, currently this is not supported.
There is no src
property to be set in CSS, but a content
property, however it doesn't seem to accept an URL fetched using attr()
, respectively it doesn't seem to be implemented by any browser yet. Judging from the specs, something like this could be possible in the future:
content: attr(data-original url);
See also: Css Content, Attr and Url in the same sentence
So, as far as I can tell you'll currently have to stick with explicitly defining the URLs in CSS, something like
<img class="lazy gd0006" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
<img class="lazy gd0007" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
<img class="lazy gd0008" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
...
@media print {
.lazy.gd0006 {
content: url('/images/gd-0006.jpg');
}
.lazy.gd0007 {
content: url('/images/gd-0007.jpg');
}
.lazy.gd0008 {
content: url('/images/gd-0008.jpg');
}
...
}