Angular：在firefox中使用img ng-src时缓存图像似乎已经破了

Question

I'm working on a real-time photosharing website. It allows users across the world to look at photos together and post comments on them, with a real-time view of who is looking at what.

I used to use jQuery DOM manipulation (insertion of <img> tags) to show different images based on what the user clicked, and recently replaced this presentation logic with an Angular controller with an ng-src directive.

The logic works overall, but I noticed that on Firefox, Angular makes a GET request every single time I change the ng-src value, when I expect that image to be cached on the browser.

If you go here: http://dev14-www.photozzap.com/conference/j4bxpt3n , then open up Firebug / Net view, and switch back and forth between two photos, you will see that it makes GET requests for the image even though those images should be in the cache.

The impact is that the user will see some lag between the time they click on a photo and the time it actually displays.

On Chrome, the Developer / Net view clearly shows that the image is pulled from the cache when switching back and forth between images.

Can my code be fixed to allow images to be cached on Firefox or is there an Angular issue there ? Chrome seems to be doing the right thing.

Answer 1

I'm on Firefox 24, and I can confirm, that requests are actually made every time I switch between photos, but... As you can see by investigating details of such request, server responds with 304 Not Modified, so image data itself isn't transfered over and over again so performance won't suffer much.

Even though firefox has stored image in cache, it's making a request to check if the image has been changed, upon seeing 304 response it just displays the local version of the file.

Answer 2

This is a firebug issue. If you inspect your traffic with a proxy, you will see that without firebug activated, it will not request the images from the server again, so any regular user will be fine.