1

我有延迟加载在我的网站上工作。但是，如果有人想打印网页，那么 id 也喜欢打印出来的图像，而不是加载微调器。

这是我的图像的样子

<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/

4

1 回答 1

1

问题是，这只是作者认为有一天在 CSS 中会很好的想法，目前不支持。

在 CSS中没有src要设置的属性，而是一个content属性，但是它似乎不接受使用 获取的 URL attr()，它似乎还没有被任何浏览器实现。从规格来看，未来可能会出现这样的情况：

content: attr(data-original url);

参见：Css Content、Attr 和 Url 在同一个句子中

因此，据我所知，您目前必须坚持在 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');
    }
    ...
}
于 2013-07-26T14:33:13.417 回答