Question about browser cache (images in css)?

Question

css

There is an online game project (html, JS). Initially, all game files are loaded.
There is a css file containing links to a bunch of pictures. In order for the pictures to get into the cache, do you need to load only him or him and all the pictures separately?
And the question is: In what browsers will this work?

Answer 1

The question is put extremely badly therefore at once I will present the general decision.
.htaccess <FilesMatch .*\.(gif|jpg|png)$> Header set Cache-control: public # Enable the Expires header for all files for a month <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" # Turn off Expires for PHP scripts <FilesMatch .*\.(php)$> ExpiresActive Off # cache.manifest needs to be updated for FF 3.6 ExpiresByType text/cache-manifest "access plus 0 seconds" # Requests ExpiresByType text/html "access plus 0 seconds" # Issue ETag header (core feature) FileETag MTime Size JS:
Разрешение кеширования файлов на стороне клиента
<IfModule mod_headers.c>
Header append Vary User-Agent
<FilesMatch .*\.(js|css|html)$>
Header set Cache-control: private

//-------------- Функция предварительной загрузки изображений ----------------//
function PreLoad(image) {
if (!(image in preload)) {
preload[image] = new Image();
preload[image].src = 'images/'+image;
}
}
//----------------------------------------------------------------------------//
setTimeout('PreLoad("chat.jpg");', 30000);

Answer 2

in order for the images to get into the cache, you need
to have a constant full URL for them
- set the appropriate parameters in the header,
and how exactly they get to the page is not important

Answer 3

The browser will download them. Will work in all modern.

Answer 4

You need to load css and all images separately with javascript. This is called image preloading, it is used so that when an element that depends on a style appears in the DOM, the image is not loaded from this style, but taken from the cache (the delay is visually noticeable and not very pleasant). Those. Roughly speaking, if you load styles that contain external resources, then these resources will not be loaded (and cached) until they appear in the DOM.

Answer 5

This code does not reload any images, it just prevents the browser from caching the styles normally, reloading each time from the server. As a result, if there are already elements in the DOM, then the browser will make a request to the server, and having received 304 Not Modified, it will show the resource from the cache, otherwise, having received 200 Ok, it will show a new picture. Or will do it when the elements appear in the HOUSE (if they were not there before).
This is how everything should work, if it doesn’t work quite like that, you need to look at the server configuration and headers. You can google about preload, for example - perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/