Problem downtown event images on demand

Problem downtown event images on demand

Hello, I am new to jquery and would like to, if possible, solve my problem. Sorry the mistakes, I'm brazilian is not very familiar with English.
Come on!
I have an event of low demand for images. I do not know for what reason, when the roll scroll to load images, the images start flashing before charging. This happens in Mozilla and Chrome, IE9 does not.
my code follows:

lazy:
  2. (function($, window) {
  3.     var $window = $(window);

  5.     $.fn.lazy = function(options) {
  6.         var elements = this;
  7.         var $container;
  8.         var settings = {
  9.             threshold       : 0,
  10.             failure_limit   : 100,
  11.             event           : "scroll", /*pode ser scroll ou click para colocar em um botao*/
  12.             effect          : "fadeIn", /*pode ser fadeIn ou Show para efeito de aparecimento da imagem*/
  13.             container       : window,
  14.             data_attribute  : "src", /* pode ser qualquer nome*/
  15.             skip_invisible  : true,
  16.             appear          : null,
  17.             load            : null
  18.         };

  20.         function update() {
  21.             var counter = 0;
  22.       
  23.             elements.each(function() {
  24.                 var $this = $(this);
  25.                 if (settings.skip_invisible && !$this.is(":visible")) {
  26.                     return;
  27.                 }
  28.                 if ($.abovethetop(this, settings) ||
  29.                     $.leftofbegin(this, settings)) {
  30.                         /* Nada. */
  31.                 } else if (!$.belowthefold(this, settings) &&
  32.                     !$.rightoffold(this, settings)) {
  33.                         $this.trigger("appear");
  34.                         /* se encontra uma imagem que ira carregar, redefinir o contador */
  35.                         counter = 0;
  36.                 } else {
  37.                     if (++counter > settings.failure_limit) {
  38.                         return false;
  39.                     }
  40.                 }
  41.             });

  43.         }
  44.         
  45.         if(options) {
  46.            
  47.             if (undefined !== options.failurelimit) {
  48.                 options.failure_limit = options.failurelimit; 
  49.                 delete options.failurelimit;
  50.             }
  51.             if (undefined !== options.effectspeed) {
  52.                 options.effect_speed = options.effectspeed; 
  53.                 delete options.effectspeed;
  54.             }

  56.             $.extend(settings, options);
  57.         }

  59.         
  60.         $container = (settings.container === undefined ||
  61.                       settings.container === window) ? $window : $(settings.container);

  63.         /* Dispara um evento de rolagem por rolagem. Não um evento de rolagem por imagem. */
  64.         if (0 === settings.event.indexOf("scroll")) {
  65.             $container.bind(settings.event, function(event) {
  66.                 return update();
  67.             });
  68.         }

  70.         this.each(function() {
  71.             var self = this;
  72.             var $self = $(self);

  74.             self.loaded = false;

  76.             /* Quando aparecer é acionado imagem-original. */
  77.             $self.one("appear", function() {
  78.                 if (!this.loaded) {
  79.                     if (settings.appear) {
  80.                         var elements_left = elements.length;
  81.                         settings.appear.call(self, elements_left, settings);
  82.                     }
  83.                     $("<img />")
  84.                         .bind("load", function() {
  85.                             $self
  86.                                 .hide()
  87.                                 .attr("src", $self.data(settings.data_attribute))
  88.                                 [settings.effect](3000);
  89.                             self.loaded = true;

  91.                             /* Remover imagem do array para não exibir na próxima vez. "não repetir imagens" */
  92.                             var temp = $.grep(elements, function(element) {
  93.                                 return !element.loaded;
  94.                             });
  95.                             elements = $(temp);

  97.                             if (settings.load) {
  98.                                 var elements_left = elements.length;
  99.                                 settings.load.call(self, elements_left, settings);
  100.                             }
  101.                         })
  102.                         .attr("src", $self.data(settings.data_attribute));
  103.                 }
  104.             });

  106.             /* Quando o evento imagem-original é acionado, mostra a/as imagem */
  107.             if (0 !== settings.event.indexOf("scroll")) {
  108.                 $self.bind(settings.event, function(event) {
  109.                     if (!self.loaded) {
  110.                         $self.trigger("appear");
  111.                     }
  112.                 });
  113.             }
  114.         });

  116.         /* Verifica se há alguma imagem para aparecer quando a janela é dimensionada */
  117.         $window.bind("resize", function(event) {
  118.             update();
  119.         });

  121.         /* Força verificação se imagem deve aparecer */
  122.         $(document).ready(function() {
  123.             update();
  124.         });
  125.         
  126.         return this;
  127.     };


  130.     $.belowthefold = function(element, settings) {
  131.         var fold;
  132.         
  133.         if (settings.container === undefined || settings.container === window) {
  134.             fold = $window.height() + $window.scrollTop();
  135.         } else {
  136.             fold = $(settings.container).offset().top + $(settings.container).height();
  137.         }

  139.         return fold <= $(element).offset().top - settings.threshold;
  140.     };
  141.     
  142.     $.rightoffold = function(element, settings) {
  143.         var fold;

  145.         if (settings.container === undefined || settings.container === window) {
  146.             fold = $window.width() + $window.scrollLeft();
  147.         } else {
  148.             fold = $(settings.container).offset().left + $(settings.container).width();
  149.         }

  151.         return fold <= $(element).offset().left - settings.threshold;
  152.     };
  153.         
  154.     $.abovethetop = function(element, settings) {
  155.         var fold;
  156.         
  157.         if (settings.container === undefined || settings.container === window) {
  158.             fold = $window.scrollTop();
  159.         } else {
  160.             fold = $(settings.container).offset().top;
  161.         }

  163.         return fold >= $(element).offset().top + settings.threshold  + $(element).height();
  164.     };
  165.     
  166.     $.leftofbegin = function(element, settings) {
  167.         var fold;
  168.         
  169.         if (settings.container === undefined || settings.container === window) {
  170.             fold = $window.scrollLeft();
  171.         } else {
  172.             fold = $(settings.container).offset().left;
  173.         }

  175.         return fold >= $(element).offset().left + settings.threshold + $(element).width();
  176.     };

  178.     $.inviewport = function(element, settings) {
  179.          return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
  180.                 !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
  181.      };

  183.     /*  */

  185.     $.extend($.expr[':'], {
  186.         "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
  187.         "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
  188.         "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
  189.         "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
  190.         "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
  191.         
  192.         "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
  193.         "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
  194.         "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
  195.     });

  197. })(jQuery, window);
scrollstop:
  2. (function(){
  3.     
  4.     var special = jQuery.event.special,
  5.         uid1 = 'D' + (+new Date()),
  6.         uid2 = 'D' + (+new Date() + 1);
  7.         
  8.     special.scrollstart = {
  9.         setup: function() {
  10.             
  11.             var timer,
  12.                 handler =  function(evt) {
  13.                     
  14.                     var _self = this,
  15.                         _args = arguments;
  16.                     
  17.                     if (timer) {
  18.                         clearTimeout(timer);
  19.                     } else {
  20.                         evt.type = 'scrollstart';
  21.                         jQuery.event.handle.apply(_self, _args);
  22.                     }
  23.                     
  24.                     timer = setTimeout( function(){
  25.                         timer = null;
  26.                     }, special.scrollstop.latency);
  27.                     
  28.                 };
  29.             
  30.             jQuery(this).bind('scroll', handler).data(uid1, handler);
  31.             
  32.         },
  33.         teardown: function(){
  34.             jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
  35.         }
  36.     };
  37.     
  38.     special.scrollstop = {
  39.         latency: 300,
  40.         setup: function() {
  41.             
  42.             var timer,
  43.                     handler = function(evt) {
  44.                     
  45.                     var _self = this,
  46.                         _args = arguments;
  47.                     
  48.                     if (timer) {
  49.                         clearTimeout(timer);
  50.                     }
  51.                     
  52.                     timer = setTimeout( function(){
  53.                         
  54.                         timer = null;
  55.                         evt.type = 'scrollstop';
  56.                         jQuery.event.handle.apply(_self, _args);
  57.                         
  58.                     }, special.scrollstop.latency);
  59.                     
  60.                 };
  61.             
  62.             jQuery(this).bind('scroll', handler).data(uid2, handler);
  63.             
  64.         },
  65.         teardown: function() {
  66.             jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
  67.         }
  68.     };
  69.     
  70. })();
and the call is made so:
  2. <script src="<%=urlhttp%>js2/jquery.1.7.0.min.js" type="text/javascript" charset="utf-8"></script>
  3.   <script src="<%=urlhttp%>js2/jquery.scrollstop.js" type="text/javascript" charset="utf-8"></script>
  4.   <script src="<%=urlhttp%>js2/jquery.lazy.js" type="text/javascript" charset="utf-8"></script>
  5.   <script type="text/javascript" charset="utf-8">
  6.   jQuery.noConflict();
  7.   jQuery(document).ready(function($){
  8.           $("img").lazy({
  9.               event: "scrollstop"
  10.           });
  11.       });
  12. </script>
when I hide the comment, not true flashing images, but does not happen in the fadein slow.