CSS3 заменить изображение src другим attr

Question

У меня есть lazyload, работающий на моем сайте. Но если кто-то хочет распечатать веб-страницу, тогда id будет выглядеть так же, как и изображения, а не загрузчик.

Вот что мои изображения выглядят

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

так с помощью @media печати {} Я бы хотел, чтобы СРК такой же, как дата-оригинала.

Пробовал это, но не повезло. (Сделал это в таблице стилей, чтобы увидеть, если он работал)

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

Вот где я получил идею: http://andydavies.me/blog/2012/08/13/what-if-we-could-use-css-to-manipulate-html-attributes/

Вот является jsfiddle, если это помогает: http://jsfiddle.net/gXpzb/

Answer 1

Проблема заключается в том , это всего лишь идея для чего-то, что, по мнению автора, было бы неплохо иметь в CSS однажды, в настоящее время это не поддерживается.

Там нет src свойства быть установлено в CSS, но content свойства, однако, кажется, не принимать URL сгружены используя attr(), соответственно это, кажется, не будет реализовано любым браузером еще. Судя по the specs, что-то подобное могло быть возможно в будущем:

content: attr(data-original url); 

Смотрите также: Css Content, Attr and Url in the same sentence

Итак, насколько я могу сказать вам в настоящее время должны придерживаться явно определения URL-адреса в CSS, что-то вроде

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