diff --git a/templates/web/common/thumbnail.html b/templates/web/common/thumbnail.html index be1caaa4d6..0775ca8260 100644 --- a/templates/web/common/thumbnail.html +++ b/templates/web/common/thumbnail.html @@ -92,9 +92,9 @@ {menu: "false",flashvars: "playerID=2&autostart=yes&noinfo=yes&animation=no&remaining=yes&soundFile={{url}}", movie: "/include/jslibs/audio-player/player.swf", allowFullScreen :"true",wmode: "transparent"}, false); {% else %} {% set url = url ~ '?tag=' ~ thumbnail.getEtag() %} - + src="/skins/css/grey.png" data-original="{{ url }}" ondragstart="return false;"> {% endif %} diff --git a/www/include/jslibs/jquery.lazyload/jquery.lazyload.1.8.1.js b/www/include/jslibs/jquery.lazyload/jquery.lazyload.1.8.1.js new file mode 100644 index 0000000000..9601a58614 --- /dev/null +++ b/www/include/jslibs/jquery.lazyload/jquery.lazyload.1.8.1.js @@ -0,0 +1,215 @@ +/* + * 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.1 + * + */ +(function($, window) { + var $window = $(window); + + $.fn.lazyload = function(options) { + var elements = this; + var $container; + var settings = { + threshold : 0, + failure_limit : 0, + event : "scroll", + effect : "show", + container : window, + data_attribute : "original", + skip_invisible : true, + appear : null, + load : null + }; + + function update() { + var counter = 0; + + elements.each(function() { + var $this = $(this); + if (settings.skip_invisible && !$this.is(":visible")) { + return; + } + if ($.abovethetop(this, settings) || + $.leftofbegin(this, settings)) { + /* Nothing. */ + } else if (!$.belowthefold(this, settings) && + !$.rightoffold(this, settings)) { + $this.trigger("appear"); + /* if we found an image we'll load, reset the counter */ + counter = 0; + } else { + if (++counter > settings.failure_limit) { + return false; + } + } + }); + + } + + if(options) { + /* Maintain BC for a couple of versions. */ + if (undefined !== options.failurelimit) { + options.failure_limit = options.failurelimit; + delete options.failurelimit; + } + if (undefined !== options.effectspeed) { + options.effect_speed = options.effectspeed; + delete options.effectspeed; + } + + $.extend(settings, options); + } + + /* Cache container as jQuery as object. */ + $container = (settings.container === undefined || + settings.container === window) ? $window : $(settings.container); + + /* Fire one scroll event per scroll. Not one scroll event per image. */ + if (0 === settings.event.indexOf("scroll")) { + $container.bind(settings.event, function(event) { + return update(); + }); + } + + this.each(function() { + var self = this; + var $self = $(self); + + self.loaded = false; + + /* When appear is triggered load original image. */ + $self.one("appear", function() { + if (!this.loaded) { + if (settings.appear) { + var elements_left = elements.length; + settings.appear.call(self, elements_left, settings); + } + $("") + .bind("load", function() { + $self + .hide() + .attr("src", $self.data(settings.data_attribute)) + [settings.effect](settings.effect_speed); + self.loaded = true; + + /* Remove image from array so it is not looped next time. */ + var temp = $.grep(elements, function(element) { + return !element.loaded; + }); + elements = $(temp); + + if (settings.load) { + var elements_left = elements.length; + settings.load.call(self, elements_left, settings); + } + }) + .attr("src", $self.data(settings.data_attribute)); + } + }); + + /* When wanted event is triggered load original image */ + /* by triggering appear. */ + if (0 !== settings.event.indexOf("scroll")) { + $self.bind(settings.event, function(event) { + if (!self.loaded) { + $self.trigger("appear"); + } + }); + } + }); + + /* Check if something appears when window is resized. */ + $window.bind("resize", function(event) { + update(); + }); + + /* Force initial check if images should appear. */ + $(document).ready(function() { + update(); + }); + + return this; + }; + + /* Convenience methods in jQuery namespace. */ + /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ + + $.belowthefold = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = $window.height() + $window.scrollTop(); + } else { + fold = $(settings.container).offset().top + $(settings.container).height(); + } + + return fold <= $(element).offset().top - settings.threshold; + }; + + $.rightoffold = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = $window.width() + $window.scrollLeft(); + } else { + fold = $(settings.container).offset().left + $(settings.container).width(); + } + + return fold <= $(element).offset().left - settings.threshold; + }; + + $.abovethetop = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = $window.scrollTop(); + } else { + fold = $(settings.container).offset().top; + } + + return fold >= $(element).offset().top + settings.threshold + $(element).height(); + }; + + $.leftofbegin = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = $window.scrollLeft(); + } else { + fold = $(settings.container).offset().left; + } + + return fold >= $(element).offset().left + settings.threshold + $(element).width(); + }; + + $.inviewport = function(element, settings) { + return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) && + !$.belowthefold(element, settings) && !$.abovethetop(element, settings); + }; + + /* Custom selectors for your convenience. */ + /* Use as $("img:below-the-fold").something() or */ + /* $("img").filter(":below-the-fold").something() which is faster */ + + $.extend($.expr[':'], { + "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); }, + "above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, + "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); }, + "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); }, + "in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); }, + /* Maintain BC for couple of versions. */ + "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, + "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); }, + "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); } + }); + +})(jQuery, window); diff --git a/www/include/minify/groupsConfig.php b/www/include/minify/groupsConfig.php index d5f97765ca..e31e1724e5 100644 --- a/www/include/minify/groupsConfig.php +++ b/www/include/minify/groupsConfig.php @@ -71,6 +71,7 @@ $groups = array( , '//include/jslibs/json2.js' , '//include/jslibs/colorpicker/js/colorpicker.js' , '//include/jslibs/jquery.mousewheel.js' + , '//include/jslibs/jquery.lazyload/jquery.lazyload.1.8.1.js' , '//include/jslibs/jquery-ui-1.8.17/jquery-ui-i18n.js' , '//include/jslibs/jquery.cookie.js' , '//include/jquery.common.js' diff --git a/www/prod/page0.js b/www/prod/page0.js index 927da27ca6..448376f8e5 100644 --- a/www/prod/page0.js +++ b/www/prod/page0.js @@ -517,6 +517,10 @@ function initAnswerForm(){ } afterSearch(); + + $("#answers img.lazyload").lazyload({ + container: $('#answers') + }); } }); return false;