Chrome caching CSS but not loading images inside CSS file

Question

We're having a weird problem at work that happens only in chrome. It looks like the css file is getting cached and the content of this file isn't getting re-downloaded.

The problem is that when using a fresh session for example "private session", the image "mainSprite.png" isn't getting displayed.

After some tests, I believe the problem is related to us doing redirects at the beginning if the user isn't authenticated. From what I understand, it might not complete the download of the sprites linked inside the css files. It will cache an invalid object as soon as the redirect starts and then on the following pages, it will fail to display a correct image since it cached something wrong.

The strange thing is that it actually loads the image completely at some point. But it looks like it's not refreshing it in memory...

I did a timeout of one second before starting redirects on first load and images correctly display. This is a quick fix and I can't expect every computer to load in 1 second every images contained in the css.

edit

As far as I can say, it really looks like a race condition. I changed the order of loading. We use require.js. Instead of loading js after css, I start js loading before. And images are getting loaded correctly now on my local server.

if someone is interested to look into it:

http://api.checklist.com

edit 2

When images aren't visible, opening new tabs will have the same problem. Closing the browser and reopening it will work on first load and images isn't being downloaded but loaded from Cache which means that before closing the browser, the image was indeed downloaded.

Look in chrome://settings/content for images. Maby setting is turnet off? — Ron van der Heijden, Aug 28 '12 at 10:47
It doesn't have anything to do with settings, i'm testing on default configs and incognito mode in order to use "new" sessions without caching and so on. — Loïc Faure-Lacroix, Aug 28 '12 at 10:55
Just brainstorming for you. For multiple sessions you also can use multiple browsers. Images are visible for me in Chrome — Ron van der Heijden, Aug 28 '12 at 11:03
Do you intend to cache your images when your site is live/in-production? If not, for now, you can set the `no-cache`, `no-store` meta attributes. — Robin Maben, Aug 28 '12 at 11:26
Perhaps not related to the problem directly, but you can press CTRL+SHIFT+R to reload a page afresh without loading anything from the cache. — starbeamrainbowlabs, Nov 06 '12 at 14:12
can you post some code (a cache manifest, html, css, etc pages) that shows this working issue? — Don Rhummy, Jun 08 '13 at 16:14
@DonRhummy Well it's kind of late for that. The project hasn't been in my hands for a long time. After try and error, we concluded that it's a bug in chrome. The image was loaded from a css file. The css file would have time to get loaded but not the images. (well image would be loaded too but later). The javascript code would execute a redirect before images were loaded. When the page reloaded, it would get the css from the cache and skip image loading. That said, when killing chrome, it would reload the css from the cache (302 status code) and load the images from the cache too (302 status) — Loïc Faure-Lacroix, Jun 15 '13 at 12:59
@DonRhummy So the file was properly cached but would appear only after rebooting chrome. For that reason, I suspect that chrome may kept loading the the file to the cache after the redirect but didn't load the image in memory. When reloading the page (without rebooting chrome). It loaded the image, from memory which wasn't present. After we fixed the code to wait for images to load before redirecting, it started working correctly. Also chromium on linux never had this problem. Only on windows and osx. — Loïc Faure-Lacroix, Jun 15 '13 at 13:02
You should redirect user before you output any content to the browser. Change your logic, do not try to fix Chrome bugs. — skobaljic, Aug 28 '14 at 14:23

score 1 · Answer 1 · answered Dec 11 '12 at 18:59

1

It looks like the problem coming from your redirects unfortunately i couldn't see your example ( link won't open ). Google chrome has indeed issues with caching it's annoying during development time ( clear up the cache, load new image, do the same for new image..), if you need to clear your cache try the folowing:

try to go to

chrome://chrome/settings/clearBrowserData

in your chrome browser and check the options:

Empty the Cache( i have also Clear download history and Delete cookies and other site and plug-in data )

click on 'Clear Browsing Data' button it should

answered Dec 11 '12 at 18:59

orustammanapov

1,792
5
25
44

Caching was probably the problem, but keep in mind that we were pushing the app for production. And I'm pretty aware on how to clear the cache of my browser. The thing is that it was somewhat caching an empty image in memory when doing the redirect (that's my guess). Closing the browser and opening it back would load the image from the disk cache and display it correctly. No need to clear the cache just restart chrome which is the strange part. As far as I can tell, we added a `onload` handler on our 2 sprites to wait for them to load before the redirect. – Loïc Faure-Lacroix Dec 13 '12 at 00:18
i'm sorry but i think i didn't get your question right. what lets you think that an empty image was cached? could you provide some links with examples? unfortunately i can't open you sandbox link and see what you mean – orustammanapov Dec 15 '12 at 10:09
I should close the question as the site is already in production and I can't fix that in a better way than we already did. Sandbox was the dev server. – Loïc Faure-Lacroix Dec 18 '12 at 13:17
Anyway I'll try to explain a bit better. We did a redirect to a auth server unless we were already connected. (Presence of a cookie). It was redirecting before it could completely load the pages etc. After auth was done, it would open back the same index.html. Looking at what was loaded, I could see that everything was loaded from the cache. Except that image wasn't showing up in the chrome devtools. Chrome didn't even try to load it from cache or anywhere. But that's not all. – Loïc Faure-Lacroix Dec 18 '12 at 13:20
After closing all chrome processes. I could open chrome back and open that site back with the net log open. On first try, I could see that that image was loaded from cache as expected. But if I would clean my cache/cookies. And login again, it would redownload the picture while doing redirect and that image wouldn't be visible as long as I didn't kill all chrome processes. Because the image was indeed cached but as long as chrome wasn't restarded it wouldn't show the picture from the cache but just nothing. – Loïc Faure-Lacroix Dec 18 '12 at 13:22

score 0 · Answer 2 · edited Sep 07 '12 at 11:38

0

All what you need to do is to trace your cash list via chrome, and from what I see is that you got this error which make it not cached:

Uncaught TypeError: Object [object Object] has no method 'placeholder'

So if you want to trace, you can use the manifest offline mode or you trace via your code.

Just following and test your page, I did catch where the error is:

file: scripts2.js Line 20 --> $('input[placeholder]').placeholder();

which you need to check the name of the place holder and change it here in this tag.

Thank you

edited Sep 07 '12 at 11:38

Adi Lester

24,731
12
95
110

answered Sep 07 '12 at 00:22

Nassim Beiruty

1
1

the site you actually saw isn't the one we are working on... I forgot you can't log into the site without a password and username... – Loïc Faure-Lacroix Sep 07 '12 at 09:04

score 0 · Answer 3 · answered Sep 12 '12 at 08:59

0

I assume your server/backend app has routes set up. Like this Play! framework example:

# Ignore favicon requests
GET     /favicon.ico                    404

# Map static resources from the /app/public folder to the /public path
GET     /public/                        staticDir:public

# Catch all
*       /{controller}                   {controller}.index

According your summary I suggest to set up a static folder route (where the images are) in config file or htaccess as you want, then check image url in browser url bar (with empty session). That should work!

answered Sep 12 '12 at 08:59

zsitro

1,812
3
24
34

All files are static. There is no dynamic file. Everything is requested from a RESTlike server using ajax. – Loïc Faure-Lacroix Sep 13 '12 at 14:21
so what is the result when you query an image with empty session (in address bar)? – zsitro Sep 13 '12 at 20:34
If I query the image and just the image, it gets loaded without problem 100% of time. If I query the page of the time management system not the login screen. The application launch the auth redirects and the images get loaded but isn't visible. For example, after closing chrome loading the website will load images from cache and the will be visible. When the images aren't visible, chrome loads the css file from cache and doesn't even try to load images. – Loïc Faure-Lacroix Sep 13 '12 at 21:15
Maybe using JS to download the CSS file once the site is loaded only in Chrome? – amandathewebdev May 21 '14 at 17:31

score 0 · Answer 4 · answered Sep 27 '12 at 18:57

First I would suggest that you first try to find ways to narrow the redirects. If it possible I would suggest that it would be much more advisable to try to create your content dynamically based on your users authentication using languages like PHP or ASP (just to name two).

The classic way of disabling the caching on a webpage is to set two <meta> tags inside of your <head> </head> tags. However, you should note that these are technically not "correct" as they are not part of any of the "offical" standards documentation. This also means that I would again lean towards my first suggestion of finding a better delivery system which in turn should prevent the problem.

So for "testing" purposes the tags would be:

<HEAD>
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <META HTTP-EQUIV="EXPIRES" CONTENT="0">
</HEAD>

score 0 · Answer 5 · edited May 23 '17 at 12:19

Maybe I don't understand your question or dilemma (maybe because of lack of explanation or because I can't see your page at that link since I run Chrome), but there's an example I ran across here that works in Chrome by just using Javascript/jQuery to load, instead of CSS:

http://jsfiddle.net/2Cgyg/6/

Use image at URL: http://www.w3schools.com/cssref/img_tree.gif

And although the accepted answer didn't work for me in Chrome, this is the question I got the jsFiddle above, from:

Load Image from javascript

All the caching, etc. is unnecessary, and even something you wouldn't want to do if your images are ever updated to something else - they won't appear without forcing a refresh which you can only do through altering the file name like this to avoid users not seeing your updated image:

myPic.jpg?MMDDYYYY

And you could set the date according to the date you are modifying it.

score 0 · Answer 6 · answered Nov 09 '15 at 05:02

0

clean your browser history like cache,cookies clean the temporary internet file

if problem not solved then reinstall browser your problem is solved definitely

answered Nov 09 '15 at 05:02

Piyush Vavaliya

5
4

Chrome caching CSS but not loading images inside CSS file

6 Answers6