Geek Answers Handbook

Why does Chrome make a new request for this SVG image every time, but not for PNG?

I have an application that displays the same image in several places and can change the src of the image.

When I point to the PNG image that I already used earlier, the browser is not worried about creating a new request, it just uses the PNG image, which is already in the cache. However, when I point to the SVG image image that I used before, the browser (Chrome 22) creates a new request. The server returns 304 (Not Modified), so the new image does not need to be uploaded, but it still requires some additional processing.

This jsFiddle can be easily tested: http://jsfiddle.net/jtmuw/1/

$('button').click( function() { $('#a').attr('src', "myImage.svg"); $('#b').attr('src', "myImage.png"); });

If you open the script using Chrome (or at least Chrome v.22.0.1229.94), and you open your tab on the network, you will see that two images were requested. If you then click "reload images" several times, the Network tab will display several requests for an SVG image, but there are no further requests for a PNG image.

As far as I can tell, the same headers are returned by the server, so I see no reason for the difference.

I do not see this in FF or Safari, so this could be a Chrome issue. However, I still feel like, maybe there are some major differences in the headers that I'm missing, and it's not only that Chrome processes strange SVG images.

+7
source share
2 answers

Perhaps you can force Chrome to cache the file. w3schools has a pretty good overview of this: http://www.w3schools.com/html/html5_app_cache.asp

Essentially, you'll want to create a manifest file (name it ... "myCache.appcache" or something else)

 CACHE MANIFEST /path/to/svg/file.svg

and then specify this in your html file like this:

 <html manifest="myCache.appcache">

This tells Chrome that even if you don’t have Internet access, this file must be cached and accessible anyway.

+1
source

Include an SVG image at the top of the document.

 <html> <head> ... </head> <body> <img style="display:none" src="cached.svg"> .... </body> <html>
+1
source

More articles:


All Articles