Function To Preload Product Images

This already occurs, if you're running a well tuned LAMP Stack.

1) Image preloading, means images leave disk + cache in memory.

Note: If you mean preloading into a browser, this is a very bad idea, as mobile users will instantly abandon your site when they get an alarm of your site eating up battery life + saturating their network connection + then eating up memory with all your images.

2) Eventually with no image access, images leave memory.

3) You can do this to force all your images into memory...

cat $site-docroot/wp-content/uploades/*/*

Select allOpen in new window

Which will access all images once, loading them into Kernel buffers.

4) Doing #3 will only work as expected if you have enough memory to hold all your images.

5) Doing #3 will eventually dump images from cache based on other file access, if your memory is low.

Said differently, #3 loads all images into Kernel buffer memory.

Then as other files are accessed, they enter Kernel buffer memory, so eventually if an image is never used by a visitor, it will be evicted from Kernel memory.

Aside: You're likely asking this question to improve site performance.

It's unlikely that this will help much if any.

In fact, depending on your memory constraints, reading all images into memory may actually slow down your system, and most likely will have no measurable performance effect... pro or con...

Suggestion: Open a new question, asking your real question, which relates to what you're trying to accomplish by preloading all images.

I have tested it and it loads much faster.  I don't want all images loaded at once just the appropriate image for the page someone is accessing.

Define "loaded"...

1) If you mean into server file cache memory where images serve quickly, this will work well.

2) If you mean loading massive numbers of images into browser memory, expect visitors to abandon your site in droves... because savvy mobile users will be running Apps that check rogue sites like this, that eat up battery life + saturate Internet connections + spin CPU usage at high levels. Some Apps now just block rogue site like this instantly... similar to Ad Blockers...

3) When working on dev approaches, run https://WebPageTest.org using a mobile instance to determine if your approach is correct or will drive off visitors.

When I say this "I don't want all images loaded at once just the appropriate image for the page someone is accessing."

It should be clear I don't want #2.  I have tested with several methods and it is faster.

Using the plugin "Preload images" is how I loaded my test.  However, you have to insert each image url one by one.  I want a php function that will get the image related to the page I am looking at and preload just the product image. Bypassing the need for that plugin.

I found this code but it doesn't work on WooCommerce.  I verified that by looking at the source code of the product pages.  

add_action( 'wp_head', function(){
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 
echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>';
});

Select allOpen in new window