CSS:在窗口滚动之前不显示背景图像(Webkit浏览器)

时间:2011-07-18 10:55:32

标签: jquery css

我是StackOverflow的新手,这是我要发布的第一个问题。

我目前正在修复此网站:http://www.studiopetervanriet.com/site/作为自由撰稿人。设计它的人发现了一个css-bug,当你使用这样的URL访问该网站时:http://www.studiopetervanriet.com/site/#services

由于网址中的Hashtag,网站向下打开,由于某些奇怪的原因,该框的背景图片将不会显示,除非之前已缓存。 因此要触发此错误,请打开Chrome / Safari,清除浏览器缓存并单击链接(http://www.studiopetervanriet.com/site/#services)

我尝试使用jQuery在加载时自动滚动1px,但由于网站需要加载更长时间才会提前调用。并且setTimeout也不是一个选项,因为加载时间因浏览器而异。

如果你们中的任何人都知道修复我会非常感激!

3 个答案:

答案 0 :(得分:4)

25.5MB 吓坏了

真的很荒谬。你需要大幅减少这个数字。

一些提示:

  • 尽可能降低所有.jpg的质量水平。
  • 您正在加载.jpg 240 415*385px张图片区域的某处 - 但您只是以148*137px的大小显示它们在实际页面上。您应该为每个图像制作尺寸合适的缩略图。

答案 1 :(得分:0)

$(document).ready()在加载DOM时触发。它发生在开发者频道的Chrome 13中,所以从长远来看这对你来说是一个问题。

可能是大页面大小。我通常不会停止加载一页两分钟;作为一名开发人员,我比大多数人更耐心。

jQuery表单中的这条评论可能会对您有所帮助:

http://forum.jquery.com/topic/document-ready-and-window-onload-difference#14737000001123094

答案 2 :(得分:0)

onload不会为背景图片触发,因此我建议将这样的img标记添加到页面顶部:

<img onload="setBackground()" src="bg.jpg" style="display:none" />

然后在setBackground()中执行以下操作:

document.body.style.backgroundImage = 'url( bg.jpg )';