title: jQuery 2.1 | Load images based on iScroll5 snap point index and image index
body: <p>I use this function to load images in an unordered list which scrolls (iScroll5) horizontally:</p>
  
  <pre><code>function loadimg()  {
  
  if ( !$('#ul').find('img').length ) { // if no images loaded in unordered list
  
  var imgarray = [
  '//imgurl/image1.jpg',
  '//imgurl/image2.jpg',
  '//imgurl/image3.jpg'
  ];
  
  $('#ul').find('a').each(function(i){
  $(this).prepend('&lt;img src='+imgarray[i]+' /&gt;');  // Add images
  });
  
  }
  }
  </code></pre>
  
  <p>So far those images load all together once the function is called and only if no images exist within the list. That's cool but it also has the effect of momentarly halting buffering of any MP3 that happens to start streaming at the same time the images start downloading, which translates to audio stoppage (on slow internet connection) until all images have been downloaded before audio stream buffer kicks in again.</p>
  
  <p><strong>QUESTION</strong>: Any way of modifying the above function to load images based on index position of iScroll5 snap point? Simply put, iScroll5 pagers, once clicked, provide current li snap point (li index position) once visible in viewport. I just want to download the image in the array whose index position matches iScroll5 li snap point.</p>
  
  <p>iScroll5 uses this for snap point info, so far couldn't make it work in above function:</p>
  
  <pre><code>var currentimgindex = myScroll.currentPage.pageX;
  </code></pre>
  
  <p><strong>IMPORTANT</strong>: I want to keep -- if possible -- the above function structure (array) as it helps to maintain/organize images and links. No lazy Load plugins please.</p>