Question

我在我的网站上运行lazyload。但是，如果有人想要打印网页，那么就像要打印的图像一样，而不是加载微调器。

这是我的图片的样子

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

所以使用@media print {} Id喜欢使src与数据原始相同。

试过这个，但没有运气。（在样式表中做了它是否有效）

@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会很好用的东西的想法，目前不支持。

在CSS中没有设置src属性，但是content属性，但是它似乎不接受使用attr()提取的URL，而不是似乎还没有任何浏览器实现。从the specs来看，将来可能会出现这样的事情：

content: attr(data-original url);

另请参阅：Css Content, Attr and Url in the same sentence

所以，据我所知，你现在必须坚持明确定义CSS中的URL，比如

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

CSS3用另一个attr替换image src

1 个答案: