Lazy load dynamic images php
<p>I have a search page with sometimes more than 50 results. Each result has a slider with images that are dynamic. Now I want to lazy load the extra images so only the first image is loaded and the other images are loaded when needed or after page load</p>

<p>My code is the following</p>

<pre><code>&lt;div class="my-slider"&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;div class="listimagecontainer"&gt;
&lt;a href="&lt;?php echo get_option('home'); ?&gt;/for-sale/&lt;?php echo $permalink; ?&gt;"&gt;
&lt;img src="&lt;?php echo $listing_photo; ?&gt;" ('thumb') alt="Photo of &lt;?php echo $listing_ref; ?&gt;" height="200px" ;/&gt; 
&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt; &lt;!-- // The following needs lazy loading  --&gt;
     &lt;?php  
     if (is_array($extraimages)){
     $i = 1;
     foreach ( $extraimages as $extraimage ) {
     if ($i++ == 5) break;
     ?&gt;
     &lt;li&gt;
     &lt;div class="listimagecontainer"&gt;
     &lt;a href="&lt;?php echo get_option('home'); ?&gt;/for-sale/&lt;?php echo $permalink; ?&gt;"&gt;
     &lt;img src="&lt;?php echo pods_image_url( $extraimage, 'thumb' ); ?&gt;" alt="Photo of &lt;?php echo $listing_ref; ?&gt;"  height="200px"&gt; 
     &lt;/a&gt;
     &lt;/div&gt;
     &lt;/li&gt;
     &lt;?php } //end foreach ?&gt;
     &lt;?php } //end if ?&gt;
&lt;/ul&gt; 
&lt;/div&gt; &lt;!-- // end div.my-slider --&gt;
</code></pre>