| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- /*
- * Lazy Load - jQuery plugin for lazy loading images
- *
- * Copyright (c) 2007-2009 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.5.0
- *
- */
- (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;
- /* 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"))
- //.attr("class", '')
- .removeClass("lazy") //DT 2013/7/26
- [settings.effect](settings.effectspeed);
- self.loaded = true;
- //DT 2012/11/15
- if(typeof img_max_width != 'undefined') {
- if(self.width == 1) {//FIX IE6
- self.onload = function() {
- if(self.width > img_max_width) {
- self.height = parseInt(self.height*img_max_width/self.width);
- self.width = img_max_width;
- self.onclick = function (e) {window.open(DTPath+'api/view.php?img='+self.src);}
- self.title = L['click_open'];
- }
- }
- } else {
- if(self.width > img_max_width) {
- self.height = parseInt(self.height*img_max_width/self.width);
- self.width = img_max_width;
- self.onclick = function (e) {window.open(DTPath+'api/view.php?img='+self.src);}
- self.title = L['click_open'];
- }
- }
- }
- })
- .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);
|