19

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.

14
  • Look in chrome://settings/content for images. Maby setting is turnet off? Aug 28, 2012 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. Aug 28, 2012 at 10:55
  • Just brainstorming for you. For multiple sessions you also can use multiple browsers. Images are visible for me in Chrome Aug 28, 2012 at 11:03
  • 1
    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. Aug 28, 2012 at 11:26
  • 1
    @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) Jun 15, 2013 at 12:59

6 Answers 6

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

5
  • 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. Dec 13, 2012 at 0: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 Dec 15, 2012 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. Dec 18, 2012 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. Dec 18, 2012 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. Dec 18, 2012 at 13:22
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

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... Sep 7, 2012 at 9:04
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!

4
  • All files are static. There is no dynamic file. Everything is requested from a RESTlike server using ajax. Sep 13, 2012 at 14:21
  • so what is the result when you query an image with empty session (in address bar)?
    – zsitro
    Sep 13, 2012 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. Sep 13, 2012 at 21:15
  • Maybe using JS to download the CSS file once the site is loaded only in Chrome? May 21, 2014 at 17:31
0

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>
0

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.

0
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.