javascript — ленивая загрузка динамических изображений переполнение стека

У меня есть страница поиска с более чем 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 -->