Ver Mensaje Individual
  #2 (permalink)  
Antiguo 06/10/2014, 05:33
Avatar de lauser
lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 7 años, 7 meses
Puntos: 401
Respuesta: Pausar Animación hasta que se cargue la web

Hace tiempo realice un modulo para prestashop basado en jQuery lazzyload que creo que te podría servir.

http://www.prestashop.com/forums/top...d#entry1756560

y el jq, era este:
Código jq:
Ver original
  1. */
  2. (function($, window, document, undefined) {
  3.     var $window = $(window);
  4.  
  5.     $.fn.lazyload = function(options) {
  6.         var elements = this;
  7.         var $container;
  8.         var settings = {
  9.             threshold       : 200,
  10.             failure_limit   : 10,
  11.             event           : "scroll",
  12.             effect          : "show",
  13.             container       : window,
  14.             data_attribute  : "original",
  15.             skip_invisible  : true,
  16.             appear          : null,
  17.             load            : null
  18.         };
  19.  
  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.                         /* Nothing. */
  31.                 } else if (!$.belowthefold(this, settings) &&
  32.                     !$.rightoffold(this, settings)) {
  33.                         $this.trigger("appear");
  34.                         /* if we found an image we'll load, reset the counter */
  35.                         counter = 0;
  36.                 } else {
  37.                     if (++counter > settings.failure_limit) {
  38.                         return false;
  39.                     }
  40.                 }
  41.             });
  42.  
  43.         }
  44.  
  45.         if(options) {
  46.             /* Maintain BC for a couple of versions. */
  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.             }
  55.  
  56.             $.extend(settings, options);
  57.         }
  58.  
  59.         /* Cache container as jQuery as object. */
  60.         $container = (settings.container === undefined ||
  61.                       settings.container === window) ? $window : $(settings.container);
  62.  
  63.         /* Fire one scroll event per scroll. Not one scroll event per image. */
  64.         if (0 === settings.event.indexOf("scroll")) {
  65.             $container.bind(settings.event, function(event) {
  66.                 return update();
  67.             });
  68.         }
  69.  
  70.         this.each(function() {
  71.             var self = this;
  72.             var $self = $(self);
  73.  
  74.             self.loaded = false;
  75.  
  76.             /* When appear is triggered load original image. */
  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](settings.effect_speed);
  89.                             self.loaded = true;
  90.  
  91.                             /* Remove image from array so it is not looped next time. */
  92.                             var temp = $.grep(elements, function(element) {
  93.                                 return !element.loaded;
  94.                             });
  95.                             elements = $(temp);
  96.  
  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.             });
  105.  
  106.             /* When wanted event is triggered load original image */
  107.             /* by triggering appear.                              */
  108.             if (0 !== settings.event.indexOf("scroll")) {
  109.                 $self.bind(settings.event, function(event) {
  110.                     if (!self.loaded) {
  111.                         $self.trigger("appear");
  112.                     }
  113.                 });
  114.             }
  115.         });
  116.  
  117.         /* Check if something appears when window is resized. */
  118.         $window.bind("resize", function(event) {
  119.             update();
  120.         });
  121.              
  122.         /* With IOS5 force loading images when navigating with back button. */
  123.         /* Non optimal workaround. */
  124.         if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
  125.             $window.bind("pageshow", function(event) {
  126.                 if (event.originalEvent && event.originalEvent.persisted) {
  127.                     elements.each(function() {
  128.                         $(this).trigger("appear");
  129.                     });
  130.                 }
  131.             });
  132.         }
  133.  
  134.         /* Force initial check if images should appear. */
  135.         $(document).ready(function() {
  136.             update();
  137.         });
  138.        
  139.         return this;
  140.     };
  141.  
  142.     /* Convenience methods in jQuery namespace.           */
  143.     /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
  144.  
  145.     $.belowthefold = function(element, settings) {
  146.         var fold;
  147.        
  148.         if (settings.container === undefined || settings.container === window) {
  149.             fold = $window.height() + $window.scrollTop();
  150.         } else {
  151.             fold = $(settings.container).offset().top + $(settings.container).height();
  152.         }
  153.  
  154.         return fold <= $(element).offset().top - settings.threshold;
  155.     };
  156.    
  157.     $.rightoffold = function(element, settings) {
  158.         var fold;
  159.  
  160.         if (settings.container === undefined || settings.container === window) {
  161.             fold = $window.width() + $window.scrollLeft();
  162.         } else {
  163.             fold = $(settings.container).offset().left + $(settings.container).width();
  164.         }
  165.  
  166.         return fold <= $(element).offset().left - settings.threshold;
  167.     };
  168.        
  169.     $.abovethetop = function(element, settings) {
  170.         var fold;
  171.        
  172.         if (settings.container === undefined || settings.container === window) {
  173.             fold = $window.scrollTop();
  174.         } else {
  175.             fold = $(settings.container).offset().top;
  176.         }
  177.  
  178.         return fold >= $(element).offset().top + settings.threshold  + $(element).height();
  179.     };
  180.    
  181.     $.leftofbegin = function(element, settings) {
  182.         var fold;
  183.        
  184.         if (settings.container === undefined || settings.container === window) {
  185.             fold = $window.scrollLeft();
  186.         } else {
  187.             fold = $(settings.container).offset().left;
  188.         }
  189.  
  190.         return fold >= $(element).offset().left + settings.threshold + $(element).width();
  191.     };
  192.  
  193.     $.inviewport = function(element, settings) {
  194.          return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
  195.                 !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
  196.      };
  197.  
  198.     /* Custom selectors for your convenience.   */
  199.     /* Use as $("img:below-the-fold").something() or */
  200.     /* $("img").filter(":below-the-fold").something() which is faster */
  201.  
  202.     $.extend($.expr[':'], {
  203.         "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
  204.         "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
  205.         "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
  206.         "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
  207.         "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
  208.         /* Maintain BC for couple of versions. */
  209.         "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
  210.         "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
  211.         "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
  212.     });
  213.  
  214. })(jQuery, window, document);
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-