简体繁体 English

HTML背景图像后加载CSS背景图像（涉及Javascript）

[英]CSS Background-Images Loading after HTML Images (Involves Javascript)

原文 2010-04-02 19:15:34 6 2 javascript/ html/ css

I threw together a quick little microsite that you can see at http://monterraauction.com . 我整理了一个简短的微型网站，您可以在http://monterraauction.com上看到它。 If you don't have a super-fast connection (and nothing's cached), the very last items to load are the background-images that are used for CSS image-text replacement (primarily, that h1#head at the top, with a 7kb background image). 如果您没有超快速的连接（并且没有任何缓存），则最后要加载的项目是用于CSS图像文本替换的背景图像（主要是顶部的h1#head ， 7kb背景图片）。 Nothing debilitating, but it looks slightly awkward. 一切都不会使人衰弱，但是看起来有些尴尬。 And I'm asking this question as a matter of curiosity more than anything else ;) Also, please note that this occurs in Firefox, but not Chrome. 出于好奇，我想问的这个问题比什么都重要；）另外，请注意，这发生在Firefox中，而不是Chrome。

Now, underneath the h1#head I have a jquery.cycle.lite-powered slideshow in div#photo . 现在，在h1#head下方，我在div#photo有一个jquery.cycle.lite驱动的幻灯片。 In the HTML markup there are a total of 13, heavy image files that make up each of the slides. 在HTML标记中，总共有13张沉重的图像文件组成每个幻灯片。 If I remove all but the first slide, then the problem goes away! 如果我删除除第一张幻灯片以外的所有幻灯片，那么问题就消失了！ So the CSS background-images are loading after...those HTML images are done? 那么...这些HTML图像完成后是否正在加载CSS背景图像？ But here's what's confusing: 但这是令人困惑的：

I check it out in YSlow...the CSS background-images have a much lower response time than all of the slides in #photo . 我在YSlow中检查了一下……CSS背景图片的响应时间比#photo所有幻灯片#photo 。 Right after all the JS files finish loading, in fact. 实际上，在所有JS文件完成加载之后。 So why aren't they showing up first? 那么为什么他们不首先出现呢？

I tried $('#photo img:last-child').load(function() { alert('Locked and Loaded!')}); 我试过$('#photo img:last-child').load(function() { alert('Locked and Loaded!')}); , but the background-images pop up a while before the alert does, so I'm assuming it's not waiting until the last slide has loaded (admittedly I'm a bit of JS noob so maybe I'm just making a wrong assumption). ，但是背景图片会在警报发出之前弹出一会儿，因此我假设它不会等到最后一张幻灯片加载完毕（诚然，我有点JS noob，所以也许我只是在做一个错误的假设）。

I also tried commenting out all the jquery.cycle.lite stuff, so that I knew I didn't have any JS manipulating the DOM elements in #photo , but that wasn't the problem. 我还尝试注释掉所有jquery.cycle.lite内容，以使我知道我没有任何JS操纵#photo的DOM元素，但这不是问题。 I tried putting all the JS at the bottom of the document, right before </body> , but that didn't work. 我尝试将所有JS放在文档的底部，就在</body>之前，但这没有用。 Lastly, I tried turning off javascript, and of course the css background-image loads way before the images in #photo , so it's definitely a JS thing (amirite?) 最后，我尝试关闭了javascript，当然，css background-image在#photo的图像之前加载了，所以这绝对是JS东西（无神论者？）

I guess the obvious solution here is to mark the slides up as LINKS rather than IMGs, and have Javascript insert those 12 extra slideshow images after the DOM is ready--users without javascript shouldn't need to download the extra images anyways. 我猜这里最明显的解决方案是将幻灯片标记为LINKS而不是IMG，并在DOM准备就绪后让Javascript插入这12张额外的幻灯片图像-无论如何，没有javascript的用户都不需要下载这些额外的图像。 But again, I'm curious: 但是再次，我很好奇：

Why does removing the extra HTML images from within #photo solve the problem? 为什么从#photo中删除多余的HTML图像可以解决问题？ And why are the CSS background-images showing up after the HTML images have loaded, even though YSlow says the css background-images loaded first? 而且，即使YSlow说先加载css背景图像，为什么在HTML图像加载后仍显示CSS背景图像？ Seeing as how it happens in FF but not Chrome, is it simply a browser issue? 看到它在FF中而不是在Chrome中如何发生，这仅仅是浏览器问题吗？

I appreciate any insight you guys could give me! 我感谢你们能给我任何见识！

2 个解决方案

What happens if you insert a little script block up at the top of the <head> to pre-load your background images? 如果在<head>的顶部插入一个小脚本块来预加载背景图像，会发生什么情况？ (Just create new "Image" objects and set the source properties.) I'm not saying that's necessarily a good idea, but it might be an interesting experiment. （只需创建新的“ Image”对象并设置源属性。）我并不是说这一定是个好主意，但这可能是一个有趣的实验。

(Note that I mean a script block that you intend to be executed at parse time, and not something that sets up a "page ready" handler a la jQuery(function() { ... }).) （请注意，我的意思是您打算在解析时执行的脚本块，而不是在jQuery（function（）{...}）上设置“页面就绪”处理程序的东西。）

Well, I didn't see this issue, even though when I looked at the HTML, all of the <img> s were there. 好吧，即使当我查看HTML时，所有的<img>都在那里，我没有看到这个问题。 Here's the Net panel for my attempt to reproduce: 这是我尝试重现的Net面板：

http://www.freepichosting.com/graphic/thumbs/322782-2010-04-02-th.png http://www.freepichosting.com/graphic/thumbs/322782-2010-04-02-th.png