How can I force the browser to force reload images that didn't load? Including printable

Question

PHP

Welcome all.

There is a page from which we print labels for our own needs, only we use it, the script is self-written. On the page there are labels and barcodes in the form of PNG images, which are generated on the fly by a PHP script by parameter. Sometimes, when there are a lot of labels (more than 50), the server can't cope a little and some pictures won't load. Moreover, as it turned out, when printing, the browser requests the page again from the server, and even if you manually “show the picture” on the missed barcodes, some arbitrary pictures will be missed again when printing.

So far, we have found a way out: we save the page with pictures, and then print it from the saved copy. Can I somehow teach the browser to at least cache images? After all, he displays them, but when he prints, he forgets and loads them again!

I also came up with the idea of ​​​​putting Apache locally and giving pictures locally, but this is curvature, because. the whole system is implemented, as it is now fashionable to say, “in the cloud”.

The URL to the image is implemented via mod_rewrite and looks like a regular static image, for example www.site.com/barcode/123456789.png

The image is generated roughly like this:

header('Content-Type: image/png');
imagepng(........);

Those. issued directly to the client.

The browser used is IE8, you cannot switch to another one, because the whole system is optimized for it.

What can be done, headers, maybe added so that the browser is guaranteed to download all the pictures, or at least not request them from the server each time, but take them from the cache? Barcode numbers are unique.

Thank you!

Answer 1

Make sure that images are generated only once when a file is requested, if one does not exist.
That. when the server requests images again, the “old” ones will not be generated, but simply loaded

Answer 2

It seems that the problem was solved by adding the line:
header('Cache-Control: max-age=37739520, public');
before generating the image/png
Javascript header - it's clear that you can do all this, but firstly, this is a difficult decision, and secondly, everything will slow down from it even more.

Answer 3

Control loading with javascript: first, statistics on the page are discarded - how many, links, etc. Then control the loading of each picture through the onload event and change the global counter for loading pictures. You may have to fiddle with the timer when the pictures are not loaded and reactivate the reload if the picture fails. In a word, to create an algorithm for obtaining and controlling a set of pictures.
As an option - if individual pictures are small - get them in base64 with a simple text and show them on the client - it turns out, as it were, local storage. Moreover, if the pictures are larger than the allowed string for base64, cut them with a script on the server and give them to the client. Perhaps, in your case, the most successful option is complete control over the loading of graphic content.

Answer 4

1) I recommend to make the return of images in blocks (since you have PNG) - put a header on each block: pragma-cache, Etag, Expire, etc.
2) on the client side, create an empty block, then assign the path (the file name must be random) - then look through JS for the actual block size - if the picture is loaded - then the block size will be equal to the image size, otherwise not. There is one BUT - in no case set the borders for the width for this block + do not put it in display: none - otherwise the trick will not work.