title: lazyload - preload adjacent images
body: <p>I'm currently customizing a wordpess theme I bought which uses a lazyload function within its image galleries. </p>
  
  <p>As it is now, the lazyload function only loads the visible image (which then gets cached). The adjacent images are hidden underneath and only will be loaded once made visible by clicking NEXT / PREVIOUS through the gallery.</p>
  
  <p>This results is the sceen going blank for a second in between the images, which feels quite uncomfortable. Once the images are cached the whole NEXT / PREVIOUS process seems much more fluent.</p>
  
  <p>Does anyone know if there a way to adjust the following lazyload code in a way, so it would preload not just the current, but also the next and previous image in advance?
  Is that even possible within this part of the code?</p>
  
  <p>I tried to find way by myself for a while now but couldn't resolve it...</p>
  
  <p>Please excuse the horrible formatting, this is actually how the file was delivered with the theme. EDIT: Reformatted the code for better readability.</p>
  
  <pre><code>/*
   * Lazy Load - jQuery plugin for lazy loading images
   *
   * Copyright (c) 2007-2012 Mika Tuupola
   *
   * Licensed under the MIT license:
   *   http://www.opensource.org/licenses/mit-license.php
   *
   * Project home:
   *   http://www.appelsiini.net/projects/lazyload
   *
   * Version:  1.8.0
   *
   */
  (function(a, b) {
      var c = a(b);
      a.fn.lazyload = function(d) {
          function h() {
              var b = 0;
              e.each(function() {
                  var c = a(this);
                  if (g.skip_invisible &amp;&amp; !c.is(":visible")) return;
                  if (!a.abovethetop(this, g) &amp;&amp; !a.leftofbegin(this, g))
                      if (!a.belowthefold(this, g) &amp;&amp; !a.rightoffold(this, g)) c.trigger("appear");
                      else if (++b &gt; g.failure_limit) return !1
              })
          }
          var e = this,
              f, g = {
                  threshold: 0,
                  failure_limit: 0,
                  event: "scroll",
                  effect: "show",
                  container: b,
                  data_attribute: "original",
                  skip_invisible: !0,
                  appear: null,
                  load: null
              };
          return d &amp;&amp; (undefined !== d.failurelimit &amp;&amp; (d.failure_limit = d.failurelimit, delete d.failurelimit), undefined !== d.effectspeed &amp;&amp; (d.effect_speed = d.effectspeed, delete d.effectspeed), a.extend(g, d)), f = g.container === undefined || g.container === b ? c : a(g.container), 0 === g.event.indexOf("scroll") &amp;&amp; f.bind(g.event, function(a) {
              return h()
          }), this.each(function() {
              var b = this,
                  c = a(b);
              b.loaded = !1, c.one("appear", function() {
                  if (!this.loaded) {
                      if (g.appear) {
                          var d = e.length;
                          g.appear.call(b, d, g)
                      }
                      a("&lt;img /&gt;").bind("load", function() {
                          c.hide().attr("src", c.data(g.data_attribute))[g.effect](g.effect_speed), b.loaded = !0;
                          var d = a.grep(e, function(a) {
                              return !a.loaded
                          });
                          e = a(d);
                          if (g.load) {
                              var f = e.length;
                              g.load.call(b, f, g)
                          }
                      }).attr("src", c.data(g.data_attribute))
                  }
              }), 0 !== g.event.indexOf("scroll") &amp;&amp; c.bind(g.event, function(a) {
                  b.loaded || c.trigger("appear")
              })
          }), c.bind("resize", function(a) {
              h()
          }), h(), this
      }, a.belowthefold = function(d, e) {
          var f;
          return e.container === undefined || e.container === b ? f = c.height() + c.scrollTop() : f = a(e.container).offset().top + a(e.container).height(), f &lt;= a(d).offset().top - e.threshold
      }, a.rightoffold = function(d, e) {
          var f;
          return e.container === undefined || e.container === b ? f = c.width() + c.scrollLeft() : f = a(e.container).offset().left + a(e.container).width(), f &lt;= a(d).offset().left - e.threshold
      }, a.abovethetop = function(d, e) {
          var f;
          return e.container === undefined || e.container === b ? f = c.scrollTop() : f = a(e.container).offset().top, f &gt;= a(d).offset().top + e.threshold + a(d).height()
      }, a.leftofbegin = function(d, e) {
          var f;
          return e.container === undefined || e.container === b ? f = c.scrollLeft() : f = a(e.container).offset().left, f &gt;= a(d).offset().left + e.threshold + a(d).width()
      }, a.inviewport = function(b, c) {
          return !a.rightofscreen(b, c) &amp;&amp; !a.leftofscreen(b, c) &amp;&amp; !a.belowthefold(b, c) &amp;&amp; !a.abovethetop(b, c)
      }, a.extend(a.expr[":"], {
          "below-the-fold": function(b) {
              return a.belowthefold(b, {
                  threshold: 0
              })
          },
          "above-the-top": function(b) {
              return !a.belowthefold(b, {
                  threshold: 0
              })
          },
          "right-of-screen": function(b) {
              return a.rightoffold(b, {
                  threshold: 0
              })
          },
          "left-of-screen": function(b) {
              return !a.rightoffold(b, {
                  threshold: 0
              })
          },
          "in-viewport": function(b) {
              return !a.inviewport(b, {
                  threshold: 0
              })
          },
          "above-the-fold": function(b) {
              return !a.belowthefold(b, {
                  threshold: 0
              })
          },
          "right-of-fold": function(b) {
              return a.rightoffold(b, {
                  threshold: 0
              })
          },
          "left-of-fold": function(b) {
              return !a.rightoffold(b, {
                  threshold: 0
              })
          }
      })
  })(jQuery, window)
  </code></pre>