logo标签列表

以编程方式设置 CSS 背景的最佳方法是什么？

phpjquerycss
3
我希望能够从我的数据库中获取一张图片，并将其用作背景。这很简单，但是是否有比我目前所采取的方法更好/更快的方法呢？
目前，我使用Javascript（在标签中）来加载我的背景图片，因为我的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>标签没有包含在此包含的组件中。
是否有更快和更可取的方法？
10
既然您要向文档添加脚本，为什么不加入一个包含所需CSS的<style>块呢？ - j08691
3
<body style="background: url(/images/galleries/lg<?php echo getBackgroundImage(); ?>) no-repeat top center white">需要更多的jQuery。我仍然记得古老的时代，人们知道CSS不是由jQuery提供的... - tereško
我本来可以这样做，但不确定这是否是更好的方法。 - Josh
1
@j08691 把那个作为答案添加上，我会投票支持的。 - Scott Saunders
1
@j08691，不要在已经应该关闭并从互联网上删除的话题中添加答案。 - tereško
显示剩余5条评论
2个回答
6

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

1
谢谢，伙计。鉴于您的评论似乎非常受欢迎，我会把它作为首选解决方案。我试图避免添加<style>块。 - Josh
4
这是一个非常好的回答。最好编写代码添加样式块，而不是编写代码在页面加载后再写代码来操作样式。 - Scott Saunders
感谢您的安慰，@ScottSaunders。 - Josh
这也得到了用户在上面的评论中提供的支持：https://developers.google.com/speed/docs/pss/InlineSmallResources - Josh
0

我看到这个问题已经被回答了，但是...

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

对的。 JavaScript默认会阻止页面渲染。虽然有解决方法，但它们取决于延迟加载JavaScript。在JavaScript加载之前，您仍然需要等待JavaScript才能加载图形以放置在背景中。使用j08691的方法可以避免此问题，但如果您想使脚本运行更快，则可以将图像数据内联到CSS文件中（也可以在HTML中完成，但图像的缓存受到HTML缓存的限制——通常情况下，CSS文件的缓存性会更好）。当然，如果您想支持旧浏览器，则需要一个“变量：用户代理”标头和不兼容浏览器的不同代码。

延迟不是因为阻塞。这个脚本几乎不会阻塞，只是在页面加载完成之后才会产生作用，因为使用了.ready()调用。 - Darth Egregious
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接