Per Pyetro

loop-per-pyetro.php

<?php if (have_posts()): ?>
  <ul id="image-data-list">
  <?php while(have_posts()): the_post(); ?>
    <li data-image-url="<?= your_post_image_url ?>"></li>
  <?php endwhile; ?>
  </ul>
<?php endif; ?>

script.es6.js

document.addEventListener( 'DOMContentLoaded', function( event ) {
  const imagesData = document.querySelectorAll('#image-data-list > li');
  const imagesUrlList = [];
  [...imagesData].forEach(image => {
    const url = image.getAttribute("data-image-url");
    if (url) {
      imagesUrlList.push(url);
    }
  });
  
  imagesUrlList.each(imageUrl => {
    // load the imageUrl
  });
});

script.jquery.js

$(document).ready(function() {
  var imagesUrlList = [];
  $("#image-list > li").each(function() {
    var url = $(this).data("image-url");
    if (url !== "" && url !== null) {
      imagesUrlList.push(url);
    }
  });
  
  imagesUrlList.each(imageUrl => {
    // load the imageUrl
  });
});