CSS背景图片未加载 [英] CSS Background Images not loading
问题描述
我最近有一个非常奇怪的错误，当你第一次加载页面，或在隐身模式，没有一个背景图片显示。
I've got a very strange bug in chrome recently that is when you load the page first time, or in incognito mode that none of the background images show.
当你检查css它显示在css面板中的图像url，但是当你鼠标悬停该网址不显示具有图像预览的工具提示。
When you inspect the css it shows the image url in the css panel, however when you mouse over the url it doesn't display a tool tip with a preview of the image.
当您检查下载的资源时，甚至没有提及任何背景图像下载。
Neither when you check the downloaded resources are there even any mention of the background-images downloading.
然后刷新页面，它工作正常，css url的工具提示甚至显示预览。
you then refresh the page and it works fine, tool-tip of the css url even shows a preview.
这个bug只是偶尔发生在第一次加载，没有办法保证再现这个。
The bug only randomly happens on first load occasionally, no way to guarantee to reproduce this.
也值得注意，然后下载并显示图像。
Also its worth to note, it you untick then retick the background-image property on chrome it then downloads and displays the image.
我有一块jquery解决了问题，但你可以看到它几乎很优雅！ / p>
I've got a piece of jquery that solves the issue but as you can see its hardly very elegant!
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);
});
这会发生在多个版本的chrome的每个窗口实例上。
this happens on every instance of windows in multiple versions of chrome.
任何想法都会很棒！谢谢！
any ideas would be great! thankyou!
您可能可以在 http：/ /ensa.ac.uk
这里是一个视频演示@ http://youtu.be/oLTyhk5rXgE
here is a video demonstration @ http://youtu.be/oLTyhk5rXgE
推荐答案
只是为了说明。
问题已解决。
问题是浏览器最后下载所有css背景图片。因此，如果在页面完成下载图像之前刷新页面，当页面再次加载时，它将从缓存加载。但由于图片未完全下载，因此无法正确显示。
The issue was that the browser downloads all the css background images last. So if you refresh the page before its finished downloading the images, when the page loads again it loads from the cache. but because the images did not fully download they dont show correctly.
这篇关于CSS背景图片未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
