CSS3 replace image src with another attr

Question

I have lazyload working on my site. But if someone wants to print the webpage then id like the images to print out as well and not the loading spinner.

Here is what my images look like

<img class="lazy" data-original="images/gd-0007.jpg" src="../../img/loadingplaceholder.gif">

so using the @media print { } Id like to make the src the same as the data-original.

Tried this but no luck. (did it in the stylesheet to see if it worked)

@media print {
.lazy {
  src: attr(data-original);
 }
}

Here is where i got the idea: http://andydavies.me/blog/2012/08/13/what-if-we-could-use-css-to-manipulate-html-attributes/

Here is a jsfiddle if it helps: http://jsfiddle.net/gXpzb/

Answer 1

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');
    }
    ...
}