Good day!

Here is a question: is it possible to somehow zoom the image before it is loaded? After all, as a rule, at first it is loaded into the browser cache, and only then scaling is applied to it. Moreover, the image is scaled only visually, but in reality it will be real in the cache of the browser and upon initial uploading to the web page! Can this be somehow prevented? Is it possible to resize images on the fly, substituting them for real ones? Perhaps this may be nonsense, but in this case, please clarify ...

Thank!

The fact is that when loading onto a page, say images 1024x968 and more, everything starts to slow down (it is clear that when scrolling, with every dynamic effect, everything is redrawn again), but I would like to turn this image into smaller size and only then load it ... is this even possible?

  • one
    Only server programming languages, such as PHP, can do this. - Lucky
  • @Nurbek, this is a completely different topic! - Salivan

1 answer 1

If I understood the question correctly, then the option is to load the image into a hidden container, for example, <div> 1x1px in size with overflow:hidden , shifted beyond the edges of the screen. And when the image has been loaded into it (and into the browser's cache), you can dynamically insert <img src="тот же url" .../> into the workspace on the page, with the required calculated sizes.

What you are asking about seems to be observed in GMail with a widget for inserting pictures into the body of the letter. The freshly loaded picture is first loaded into a small square preview in 1: 1 scale, often without getting into the square. And only when it is fully uploaded, the size changes so that the whole picture fits into a 100x100 box.

  • Perhaps my fault. It's just that when loading onto a page, say images 1024x968 and more, everything starts to slow down (it is clear that when scrolling, every dynamic effect is redrawn again), I would like to turn this image into smaller size and only then upload ... is this even possible? - Salivan