title: JQuery lazy loading doesn't always work
body: <p>I have the following to lazy-load images:</p>
  
  <pre><code>$(document).ready(function() {
      // lazy load images
      var win = $(window);
      win.on('load resize scroll', function() {
          var viewport = {
              top: win.scrollTop(),
              left: win.scrollLeft()
          };
          viewport.right = viewport.left + win.width();
          viewport.bottom = viewport.top + win.height();
  
          // cycle through all images (within visible content) and update src attributes
          $('img[data-src]').each(function() {
              var bounds = $(this).offset();
              bounds.right = bounds.left + $(this).outerWidth();
              bounds.bottom = bounds.top + $(this).outerHeight();
  
              // if image is within viewable area, display it
              if (!(viewport.right &lt; bounds.left || viewport.left &gt; bounds.right ||
                    viewport.bottom &lt; bounds.top || viewport.top &gt; bounds.bottom)) {
                  var img = $(this).attr('data-src');
                  if (img) {
                      $(this).attr('src', img);
                      $(this).removeAttr('data-src');
                  }
              }
          });
      });
  });
  </code></pre>
  
  <p>What I've noticed (at least in Chrome), however, is that sometimes the images won't initially <em>load</em>, but show up as soon as I start scrolling. Any idea why or what is wrong?</p>
  
  <p><strong>EDIT:</strong> here is a <a href="https://jsfiddle.net/evffg0cz/" rel="nofollow noreferrer">JSFiddle</a> although reproducing the problem seems to be completely sporadic, I don't know what exactly causes it... Hence why I'm here.</p>