After the page is loaded; there are some links hovering over it, triggering a custom tooltip. This tooltip changes the icon in the icons.png file Part of the image is displayed as the background image of certain HTML elements.
For example, the HTML code is like this:
jQuery(“.profile”).tipTip({delay:200,defaultPosition : “Top”, content: “< a href ='#'style ='width: 32px; height: 32px; display: block; background: url (images / icons.png)no-repeat -200px -64px'>< / a>“});
[icons.png is mentioned elsewhere in the HTML file]
Now every time I hover on the link, the tooltip is showing up, but
simultaneously the browser is sending a HTTP request to the server for
the icons.png file. And the response code from the server is
coming as 304 Not Modified.
Although the content of the file is not extracted, the overhead of sending the header (about 166 bytes) each time still exists , Which in turn caused a delay of 1.5 seconds (I am slowly connecting). During this period of 1.5 seconds, the tooltip element has no background image & suddenly, the image suddenly appeared.
This Some screenshots
> Chrome web panel:
> Firebug web panel:
> HTTP header:
As far as I know, once the resource is obtained, the browser should save it in the cache. Get it from there if necessary, instead of requesting the server multiple times.
< p>I found that the server did not send any “Expires” or “Cache-Control” headers and content. I am not sure if this may be the reason behind this special behavior of Chrome. Any suggestions are greatly appreciated.
PS: The application is hosted on Heroku‘s shared hosting environment. I’m using Firefox 15.0 & Chrome Version 21.0.1180.89 on Ubuntu 12.04 x86_64.
p>
Your multiple requests may be because they are the time you hover on the new tooltip, bringing it into visibility and thus prompting to call the image.
p>
Your intuition is correct. The problem is that if the cache header configuration is not completed directly on your server or through the .htaccess file, then it will continue to request an http request from the server to see if it needs to download the update Version or not. Once you sort out your “expires” header, you can set it via mod_expires, and it will start to return a locally requested file version every time.
Source: http:// httpd.apache.org/docs/2.2/mod/mod_e xpires.html
I hosted a PNG file named icons.png on the Apache server. Basically this file is a combination of other small image elements (CSS Sprite) When the page loads for the first time, this file loads with a normal 200 OK response.
After the page loads; there are some links hovering over it to trigger a custom tooltip. This tooltip Display part of the image in the icons.png file as the background image of certain HTML elements.
For example, the HTML code looks like this:
jQuery(“.profile”).tipTip ({delay:200,defaultPosition:”top”,content:”< a href ='#'style ='width: 32px; height: 32px; display: block; background: url (images / icons.png)no-repeat -200px -64px'>< / a>“});
[icons.png is mentioned elsewhere in the HTML file]
< p>Now every time I hover on the link, the tooltip is showing up, but
simultaneously the browser is sending a HTTP request to the server for
the icons.png file. And the response code from the server is
coming as 304 Not Modified.
Although the content of the file is not extracted, the header is sent every time (about 166 The overhead of bytes) is still there, which in turn causes a delay of 1.5 seconds (I am slowly connecting). During this period of 1.5 seconds, the tooltip element has no background image & suddenly, the image suddenly popped up. /p>
Here are some screenshots
> Chrome web panel:
> Firebug web panel:
> HTTP header:
As far as I know, once the resource is obtained, the browser should save it in the cache. Get it from there when necessary, instead of requesting the server multiple times.
I found that the server did not send any “Expires” or “Cache-Control” header and content. I am not sure if this may be the reason behind this special behavior of Chrome. Any suggestions are greatly appreciated.
< /p>
PS: The application is hosted on Heroku‘s shared hosting environment. I’m using Firefox 15.0 & Chrome Version 21.0.1180.89 on Ubuntu 12.04 x86_64.
Whenever you display an element for the first time, at least download any relevant background image points in modern browsers.
Your multiple requests may be because they are the time you hovered on the new tooltip, bringing it into visibility and thus prompting the image to be called.
Your intuition is correct, the problem Yes, if the cache header configuration is not done directly on your server or through the .htaccess file, then it will continue to request an http request from the server to see if it needs to download the updated version or not. Once you sort out your “expires” Title, you can set it through mod_expires, and it will start to return a locally requested file version every time.
Source: http://httpd.apache.org/docs/2.2/mod/mod_expires .html