title: jQuery Lazy Loading - Problem with display:none
body: <p>I want to display Lazy Loading in one of my websites, the problem is I have several images that must stay hidden until I need them (for example a warning sign used on a form - the validation process - the image becomes visible only when the field is filled incorrectly).</p>
  
  <p>Is there a solution to modify Lazy Loading so it ignores all images containing the "display:none" attribute?</p>
  
  <p>Thank you very much!</p>
  
  <p>Plugin URL: <a href="http://www.appelsiini.net/projects/lazyload" rel="nofollow">http://www.appelsiini.net/projects/lazyload</a></p>
  
  <p>Code used on the page:</p>
  
  <pre><code>&lt;script src="js/jquery.lazyload.js /&gt;" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8"&gt; 
    $(function() {     
          if      
        $("img").lazyload({
           placeholder : "img/grey.gif",
           effect      : "fadeIn"
        });
    });
  &lt;/script&gt; 
  </code></pre>
  
  <p>And the plugin code (jquery.lazyload.js)</p>
  
  <pre><code>(function($) {
      $.fn.lazyload = function(options) {
          var settings = {
              threshold    : 0,
              failurelimit : 0,
              event        : "scroll",
              effect       : "show",
              container    : window
          };
  
          if(options) {
              $.extend(settings, options);
          }
  
          /* Fire one scroll event per scroll. Not one scroll event per image. */
          var elements = this;
          if ("scroll" == settings.event) {
              $(settings.container).bind("scroll", function(event) {
  
                  var counter = 0;
                  elements.each(function() {
                      if ($.abovethetop(this, settings) ||
                          $.leftofbegin(this, settings)) {
                              /* Nothing. */
                      } else if (!$.belowthefold(this, settings) &amp;&amp;
                          !$.rightoffold(this, settings)) {
                              $(this).trigger("appear");
                      } else {
                          if (counter++ &gt; settings.failurelimit) {
                              return false;
                          }
                      }
                  });
                  /* Remove image from array so it is not looped next time. */
                  var temp = $.grep(elements, function(element) {
                      return !element.loaded;
                  });
                  elements = $(temp);
              });
          }
  
          this.each(function() {
              var self = this;
  
              /* Save original only if it is not defined in HTML. */
              if (undefined == $(self).attr("original")) {
                  $(self).attr("original", $(self).attr("src"));     
              }
  
              if ("scroll" != settings.event || 
                      undefined == $(self).attr("src") || 
                      settings.placeholder == $(self).attr("src") || 
                      ($.abovethetop(self, settings) ||
                       $.leftofbegin(self, settings) || 
                       $.belowthefold(self, settings) || 
                       $.rightoffold(self, settings) )) {
  
                  if (settings.placeholder) {
                      $(self).attr("src", settings.placeholder);      
                  } else {
                      $(self).removeAttr("src");
                  }
                  self.loaded = false;
              } else {
                  self.loaded = true;
              }
  
              /* When appear is triggered load original image. */
              $(self).one("appear", function() {
                  if (!this.loaded) {
                      $("&lt;img /&gt;")
                          .bind("load", function() {
                              $(self)
                                  .hide()
                                  .attr("src", $(self).attr("original"))
                                  [settings.effect](settings.effectspeed);
                              self.loaded = true;
                          })
                          .attr("src", $(self).attr("original"));
                  };
              });
  
              /* When wanted event is triggered load original image */
              /* by triggering appear.                              */
              if ("scroll" != settings.event) {
                  $(self).bind(settings.event, function(event) {
                      if (!self.loaded) {
                          $(self).trigger("appear");
                      }
                  });
              }
          });
  
          /* Force initial check if images should appear. */
          $(settings.container).trigger(settings.event);
  
          return this;
  
      };
  
      /* Convenience methods in jQuery namespace.           */
      /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
  
      $.belowthefold = function(element, settings) {
          if (settings.container === undefined || settings.container === window) {
              var fold = $(window).height() + $(window).scrollTop();
          } else {
              var fold = $(settings.container).offset().top + $(settings.container).height();
          }
          return fold &lt;= $(element).offset().top - settings.threshold;
      };
  
      $.rightoffold = function(element, settings) {
          if (settings.container === undefined || settings.container === window) {
              var fold = $(window).width() + $(window).scrollLeft();
          } else {
              var fold = $(settings.container).offset().left + $(settings.container).width();
          }
          return fold &lt;= $(element).offset().left - settings.threshold;
      };
  
      $.abovethetop = function(element, settings) {
          if (settings.container === undefined || settings.container === window) {
              var fold = $(window).scrollTop();
          } else {
              var fold = $(settings.container).offset().top;
          }
          return fold &gt;= $(element).offset().top + settings.threshold  + $(element).height();
      };
  
      $.leftofbegin = function(element, settings) {
          if (settings.container === undefined || settings.container === window) {
              var fold = $(window).scrollLeft();
          } else {
              var fold = $(settings.container).offset().left;
          }
          return fold &gt;= $(element).offset().left + settings.threshold + $(element).width();
      };
      /* Custom selectors for your convenience.   */
      /* Use as $("img:below-the-fold").something() */
  
      $.extend($.expr[':'], {
          "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
          "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
          "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
          "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
      });
  
  })(jQuery);
  </code></pre>