Does preloading images with new Image() really work? _Image special effects

It is often used to alternately display images on web pages. Many recommended practices are to preload images using new Image(). But is using new Image() really useful?
Test:
Put a filter in the background to capture all /* requests:
Simple print the requested URL in doFilter:

Code
HttpServletRequest httpRequest = (HttpServletRequest) request ;
System.out.println("requets url: " httpRequest.getRequestURI());
chain.doFilter(request, response);

html code:
code

<button onclick="change()"> </button>change<img id="im" src="ico_checked.gif" alt="Does preloading images with new Image() really work? _Image special effects" >
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

You can see that it is printed three times url. html page is requested once. Once when t1.src is set. once.
I think if you press the button to change the image on the page at this time, the image will not be loaded from the server because it is already in the cache. But when I click it, the filter still prints out the URL! <script> var t1 = new Image(); t1.src = 'ico_unchecked.gif'; function change(){ im.src = t1.src; } </script>It seems that the request will be issued as soon as the src of the image object is changed. So isn’t preloading images useless?