jQuery 지연로드 - 표시 문제 : 없음

Question

내 웹 사이트 중 하나에서 지연로드를 표시하고 싶습니다. 문제가 발생하기까지 필요하지 않을 때까지 숨겨져 있어야하는 여러 이미지가 있습니다 (예 : 양식에 사용 된 경고 기호 - 유효성 검사 프로세스 - 필드가 잘못 채워진 경우에만 이미지가 표시됩니다.

"display : none"속성을 포함하는 모든 이미지를 무시하도록 지연로드를 수정하는 솔루션이 있습니까?

대단히 감사합니다!

플러그인 URL : 페이지에 사용 http://www.appelsiini.net/projects/lazyload

코드 :

<script src="js/jquery.lazyload.js />" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
    $(function() {  
     if  
     $("img").lazyload({ 
     placeholder : "img/grey.gif", 
     effect  : "fadeIn" 
     }); 
    }); 
</script> 

그리고 플러그인 코드 (jquery.lazyload.js는)

(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) && 
         !$.rightoffold(this, settings)) { 
          $(this).trigger("appear"); 
        } else { 
         if (counter++ > 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) { 
        $("<img />") 
         .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 <= $(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 <= $(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 >= $(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 >= $(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); 

Answer 1

게으른로드는 현재 사용하지 않는 쓸 수 있는. 예상대로 최신 브라우저에서는 작동하지 않습니다. 플러그인의 URL에서

...
당신은 여전히 ​​플러그인을 사용하려는 경우, 당신이 그것을 작동