以编程方式 CSS 背景的最佳方式？ [关闭]答案

【问题标题】：Best way to programmatically CSS background? [closed]以编程方式 CSS 背景的最佳方式？ [关闭]
【发布时间】：2012-06-05 03:53:09
【问题描述】：

我想从我的数据库中抓取一张图片，并将其用作背景。这很简单，但有没有比我目前的方法更好/更快的方法。

目前，我使用 Javascript（在 <head> 中）加载我的背景图片，因为我的 CSS 是链接的而不是内部的：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript'>
    $(document).ready(function(){
        $('body').css('background', 'url(/_images/galleries/lg_<?php echo getBackgroundImage(); ?>) no-repeat top center white');
    });
</script>

加载页面后，加载背景大约需要半秒。我认为延迟可归因于加载外部 JS 等。此外，上述代码作为一个组件包含在内，因此我不必在网站的每个页面中复制/粘贴该代码。 <body> 不包含在此包含的组件中。

有没有更快更好的方法？

【问题讨论】：

既然您正在向文档中添加脚本，您就不能使用您需要的 CSS 添加一个 <style> 块吗？
<body style="background: url(/_images/galleries/lg_<?php echo getBackgroundImage(); ?>) no-repeat top center white"> .. 需要 moar jquery。我还记得远古时代，当人们知道 CSS 不是 jQuery 提供的东西时......
我可以，但不知道这是否是一个更可取的方法。
@j08691 将其添加为答案。我会投票给它。
@j08691 ，不要在主题上添加答案，应该关闭并从互联网上删除

标签： php jquery css

【解决方案1】：

由于您要向文档中添加脚本，因此您可能只需添加带有所需 CSS 的 <style> 块。

【讨论】：

谢谢，伙计。鉴于您的评论似乎很受欢迎，我会将此作为首选解决方案。我试图避免添加 <style> 块。
这是一个很好的答案。编写代码来添加样式块要比在页面加载后编写代码来操作样式要好得多。
感谢@ScottSaunders 的安慰。
这也加强了它，根据在上面的 cmets 中提供它的用户：developers.google.com/speed/docs/pss/InlineSmallResources

【解决方案2】：

我看到这个问题已经回答了……

我认为延迟可以归因于加载外部 JS

是的。默认情况下，Javascript 会阻止。虽然有 ways around this，但它们依赖于延迟加载 javascript。而且您仍然必须等待 javascript 加载，然后才能加载要放入后台的图形。使用 j08691 的方法可以避免这个问题，但是如果您希望脚本运行得更快，那么 CSS 文件中的 inline the image data （您可以在 HTML 中执行此操作，但是图像的缓存受到 html 缓存的限制 - 通常是 CSS文件将更具缓存能力）。当然，如果您想支持旧版浏览器，则需要 Varies: User-agent 标头和不兼容浏览器的不同代码。

【讨论】：

延迟不是因为阻塞。由于.ready() 调用，该脚本几乎不会阻塞，直到页面加载后才会产生任何影响。