title: Lazy loading images on mobile
body: <p>I'm using this lazy loading code.</p>
  
  <p>JS CODE:</p>
  
  <pre><code>$(window).on('scroll touchmove', function(){
    if( $('.touch').length) {
      var images = $('.theme-slider img[data-lazy]');
      images.each(function(index){
          if(isElementVisible(this)) {
              $(this).attr('src', $(this).attr('data-lazy'));
              $(this).removeAttr('data-lazy');
          }
      })
      if(images.length == 0) { 
          $(window).off('scroll touchmove');
      }
    }
  });
  
  
  // Checking if an image is within the viewport
  function isElementVisible(el){ 
    var rect = el.getBoundingClientRect();
    return (
      rect.top &gt;= 0 &amp;&amp; 
      rect.left &gt;= 0 &amp;&amp;
      rect.bottom &lt;= (window.innerHeight) &amp;&amp;
      rect.right &lt;= (window.innerWidth)   
    );    
  }
  </code></pre>
  
  <p>My problem is on iPhone when I'm scrolling horizontal if the image has entered the viewport it doesn't load, I have to scroll back and forward until it works.
  Any ideas how I can solve it?</p>