懒加载动态图像php

Question

我有一个搜索页面，有时候会有50多个结果。每个结果都有一个滑块，图像是动态的。现在我想延迟加载额外的图像，这样只加载第一个图像，并在需要时或页面加载后加载其他图像

我的代码如下

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