How to prevent the white 'flash' on page load created by background image loading delay?

Question

The problem is, on most sites on the web, there are background images. They take time to load. Ordinarily, it wouldn\'t be a problem if the images were optimized, and small

Answer 1

I was having the same issue and found it pretty strange that this isn't talked about more. I still haven't found any documentation on this, but please comment if you find anything regarding RFC's for css background image loading priorities, etc.

Anyways, the only thing I found is that load immediately while background-image() seems to load on dom ready.

So my solution was to place a with display:none just before the

with the background image. This will load the image immediately and then it gets used immediately for the background-image.

• One thing to note is that you could still get flickering on images that are not optimized. So for jpg's make sure to compress them and set the "progressive" attribute when creating them.

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...