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

后端未结

关注

 6  1877

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

相关标签:

6条回答

醉话见心

2020-12-23 10:26
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 <img> load immediately while background-image() seems to load on dom ready.

So my solution was to place a <img> with display:none just before the <div> with the background image. This will load the image immediately and then it gets used immediately for the background-image.
```
<img src="my-image.jpg" style="display: none;" />
<div style="background-image: url('my-image.jpg');"></div>
```
- 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)
发布评论:

提交评论
- 加载中...
孤独总比滥情好

2020-12-23 10:26

I would use a query string "?201611" on the image URL in css. This tells the browser which version of the image to load. So instead of checking for new version every time, it will load the version kept in cache. The flash effect will happens only the first time the website is visited.

ex. http://domain.com/100x100.jpg?201611

0 讨论(0)
发布评论:

提交评论
- 加载中...
南笙

2020-12-23 10:27
Don't delay loading parts of your site - what if the background image were to have an error in transmission and never arrive? Your scripts would never load.

Instead, if you really dislike the "white" flash, set the background color of the document to a more pleasing color, more in line with your background image. You can do so in the same css style:
```
body {
    background: #EDEBED url(myGrayBackgroundImage.jpg);
}
```
It's simple, has virtually no cost, won't break, and won't delay things from downloading unnecessarily. It looks like you're already doing something like this - I wouldn't change it. I don't think anybody has the expectation that your site look a certain way before it loads.
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦如初夏

2020-12-23 10:32
I wanted to add something, in case of having a black background image set for the body. I was experimenting with transitions in between pages in the same site. I finally used this (neatly loads black-background from black, avoiding the flash yeah!):
```
html{
    background-color: black;
}

body{
    -webkit-animation: fadein 1.5s; //I use chrome
    background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) ), url('wall_pattern.jpg');
    color: white;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
孤独总比滥情好

2020-12-23 10:38
So, while changing the background color does help it's important to note that the reason the page is not loading quickly is likely due to javascript being in the header. You can remedy this by putting your javascript tags
```
<script type="text/javascript" src="/path/to/js/javascript.js"></script>
```
in the footer of your pages so that it loads after the browser has already read the css and displayed most of the page. I realize this is an old post, but I happened upon it while thinking about this problem myself and realized (through remembering conversations and posts I'd seen before) that I had the js in my header.
0 讨论(0)
发布评论:

提交评论
- 加载中...

北海茫月

2020-12-23 10:41

You may use something like this:

HTML

<!-- Add a class to flag when the page is fully loaded -->
<body onload="document.body.classList.add('loaded')">

CSS

/* Hide slider image until page is fully loaded*/
body:not(.loaded) #slider img {
  display:none;
}

0 讨论(0)