Avatar of sharingsunshine
sharingsunshineFlag for United States of America

asked on 

Function To Preload Product Images

I need a php function that will preload the product images in WooCommerce not the gallery.  I have a plugin that I can insert the image url's one by one.  However, since I have over 600 products is it possible via php to preload all of the images sitewide as their respective pages are accessed?

My website is https://www.theherbsplace.com

PHPWeb Development* woo commerce

Avatar of undefined
Last Comment
Avatar of David Favor
David Favor
Flag of United States of America image

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/*/*

Open 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.
Avatar of David Favor
David Favor
Flag of United States of America image

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.
Avatar of sharingsunshine


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.
Avatar of David Favor
David Favor
Flag of United States of America image

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.
Avatar of sharingsunshine


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.'"/>';

Open in new window

Avatar of sharingsunshine
Flag of United States of America image

Blurred text
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.

Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews


IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo