forked from qwerty/tupali
implementacion de carga dinamica de imagenes con lazy loading
This commit is contained in:
humano
parent
6b9c5a7b3f
commit
437670c48a
10
index.php
10
index.php
|
|
@ -718,11 +718,12 @@ legend.legend-area {
|
|||
<script src="./librerias/bootstrap/js/bootstrap.min.js" ></script>
|
||||
<script src="./librerias/charts/Chart.bundle.js"></script>
|
||||
<script src="./librerias/charts/utils.js"></script>
|
||||
<script src="./librerias/lazy/jquery.lazy.min.js"></script>
|
||||
|
||||
<!-- morris -->
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
|
||||
<!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> -->
|
||||
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> -->
|
||||
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> -->
|
||||
<!-- morris -->
|
||||
|
||||
<style>
|
||||
|
|
@ -1186,6 +1187,9 @@ $eventos= "
|
|||
<?php } ?>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('.lazy').Lazy();
|
||||
});
|
||||
|
||||
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
|
||||
event.preventDefault();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,870 @@
|
|||
/*!
|
||||
* jQuery & Zepto Lazy - v1.7.6
|
||||
* http://jquery.eisbehr.de/lazy/
|
||||
*
|
||||
* Copyright 2012 - 2017, Daniel 'Eisbehr' Kern
|
||||
*
|
||||
* Dual licensed under the MIT and GPL-2.0 licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl-2.0.html
|
||||
*
|
||||
* $("img.lazy").lazy();
|
||||
*/
|
||||
|
||||
;(function(window, undefined) {
|
||||
"use strict";
|
||||
|
||||
// noinspection JSUnresolvedVariable
|
||||
/**
|
||||
* library instance - here and not in construct to be shorter in minimization
|
||||
* @return void
|
||||
*/
|
||||
var $ = window.jQuery || window.Zepto,
|
||||
|
||||
/**
|
||||
* unique plugin instance id counter
|
||||
* @type {number}
|
||||
*/
|
||||
lazyInstanceId = 0,
|
||||
|
||||
/**
|
||||
* helper to register window load for jQuery 3
|
||||
* @type {boolean}
|
||||
*/
|
||||
windowLoaded = false;
|
||||
|
||||
/**
|
||||
* make lazy available to jquery - and make it a bit more case-insensitive :)
|
||||
* @access public
|
||||
* @type {function}
|
||||
* @param {object} settings
|
||||
* @return void
|
||||
*/
|
||||
$.fn.Lazy = $.fn.lazy = function(settings) {
|
||||
return new LazyPlugin(this, settings);
|
||||
};
|
||||
|
||||
/**
|
||||
* helper to add plugins to lazy prototype configuration
|
||||
* @access public
|
||||
* @type {function}
|
||||
* @param {string|Array} names
|
||||
* @param {string|Array} [elements]
|
||||
* @param {function} loader
|
||||
* @return void
|
||||
*/
|
||||
$.Lazy = $.lazy = function(names, elements, loader) {
|
||||
// make second parameter optional
|
||||
if( $.isFunction(elements) ) {
|
||||
loader = elements;
|
||||
elements = [];
|
||||
}
|
||||
|
||||
// exit here if parameter is not a callable function
|
||||
if( !$.isFunction(loader) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// make parameters an array of names to be sure
|
||||
names = $.isArray(names) ? names : [names];
|
||||
elements = $.isArray(elements) ? elements : [elements];
|
||||
|
||||
var config = LazyPlugin.prototype.config,
|
||||
forced = config._f || (config._f = {});
|
||||
|
||||
// add the loader plugin for every name
|
||||
for( var i = 0, l = names.length; i < l; i++ ) {
|
||||
if( config[names[i]] === undefined || $.isFunction(config[names[i]]) ) {
|
||||
config[names[i]] = loader;
|
||||
}
|
||||
}
|
||||
|
||||
// add forced elements loader
|
||||
for( var c = 0, a = elements.length; c < a; c++ ) {
|
||||
forced[elements[c]] = names[0];
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* contains all logic and the whole element handling
|
||||
* is packed in a private function outside class to reduce memory usage, because it will not be created on every plugin instance
|
||||
* @access private
|
||||
* @type {function}
|
||||
* @param {LazyPlugin} instance
|
||||
* @param {object} config
|
||||
* @param {object|Array} items
|
||||
* @param {object} events
|
||||
* @param {string} namespace
|
||||
* @return void
|
||||
*/
|
||||
function _executeLazy(instance, config, items, events, namespace) {
|
||||
/**
|
||||
* a helper to trigger the 'onFinishedAll' callback after all other events
|
||||
* @access private
|
||||
* @type {number}
|
||||
*/
|
||||
var _awaitingAfterLoad = 0,
|
||||
|
||||
/**
|
||||
* visible content width
|
||||
* @access private
|
||||
* @type {number}
|
||||
*/
|
||||
_actualWidth = -1,
|
||||
|
||||
/**
|
||||
* visible content height
|
||||
* @access private
|
||||
* @type {number}
|
||||
*/
|
||||
_actualHeight = -1,
|
||||
|
||||
/**
|
||||
* determine possibly detected high pixel density
|
||||
* @access private
|
||||
* @type {boolean}
|
||||
*/
|
||||
_isRetinaDisplay = false,
|
||||
|
||||
/**
|
||||
* dictionary entry for better minimization
|
||||
* @access private
|
||||
* @type {string}
|
||||
*/
|
||||
_afterLoad = "afterLoad",
|
||||
|
||||
/**
|
||||
* dictionary entry for better minimization
|
||||
* @access private
|
||||
* @type {string}
|
||||
*/
|
||||
_load = "load",
|
||||
|
||||
/**
|
||||
* dictionary entry for better minimization
|
||||
* @access private
|
||||
* @type {string}
|
||||
*/
|
||||
_error = "error",
|
||||
|
||||
/**
|
||||
* dictionary entry for better minimization
|
||||
* @access private
|
||||
* @type {string}
|
||||
*/
|
||||
_img = "img",
|
||||
|
||||
/**
|
||||
* dictionary entry for better minimization
|
||||
* @access private
|
||||
* @type {string}
|
||||
*/
|
||||
_src = "src",
|
||||
|
||||
/**
|
||||
* dictionary entry for better minimization
|
||||
* @access private
|
||||
* @type {string}
|
||||
*/
|
||||
_srcset = "srcset",
|
||||
|
||||
/**
|
||||
* dictionary entry for better minimization
|
||||
* @access private
|
||||
* @type {string}
|
||||
*/
|
||||
_sizes = "sizes",
|
||||
|
||||
/**
|
||||
* dictionary entry for better minimization
|
||||
* @access private
|
||||
* @type {string}
|
||||
*/
|
||||
_backgroundImage = "background-image";
|
||||
|
||||
/**
|
||||
* initialize plugin
|
||||
* bind loading to events or set delay time to load all items at once
|
||||
* @access private
|
||||
* @return void
|
||||
*/
|
||||
function _initialize() {
|
||||
// detect actual device pixel ratio
|
||||
// noinspection JSUnresolvedVariable
|
||||
_isRetinaDisplay = window.devicePixelRatio > 1;
|
||||
|
||||
// prepare all initial items
|
||||
items = _prepareItems(items);
|
||||
|
||||
// if delay time is set load all items at once after delay time
|
||||
if( config.delay >= 0 ) {
|
||||
setTimeout(function() {
|
||||
_lazyLoadItems(true);
|
||||
}, config.delay);
|
||||
}
|
||||
|
||||
// if no delay is set or combine usage is active bind events
|
||||
if( config.delay < 0 || config.combined ) {
|
||||
// create unique event function
|
||||
events.e = _throttle(config.throttle, function(event) {
|
||||
// reset detected window size on resize event
|
||||
if( event.type === "resize" ) {
|
||||
_actualWidth = _actualHeight = -1;
|
||||
}
|
||||
|
||||
// execute 'lazy magic'
|
||||
_lazyLoadItems(event.all);
|
||||
});
|
||||
|
||||
// create function to add new items to instance
|
||||
events.a = function(additionalItems) {
|
||||
additionalItems = _prepareItems(additionalItems);
|
||||
items.push.apply(items, additionalItems);
|
||||
};
|
||||
|
||||
// create function to get all instance items left
|
||||
events.g = function() {
|
||||
// filter loaded items before return in case internal filter was not running until now
|
||||
return (items = $(items).filter(function() {
|
||||
return !$(this).data(config.loadedName);
|
||||
}));
|
||||
};
|
||||
|
||||
// create function to force loading elements
|
||||
events.f = function(forcedItems) {
|
||||
for( var i = 0; i < forcedItems.length; i++ ) {
|
||||
// only handle item if available in current instance
|
||||
// use a compare function, because Zepto can't handle object parameter for filter
|
||||
// var item = items.filter(forcedItems[i]);
|
||||
/* jshint loopfunc: true */
|
||||
var item = items.filter(function() {
|
||||
return this === forcedItems[i];
|
||||
});
|
||||
|
||||
if( item.length ) {
|
||||
_lazyLoadItems(false, item);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// load initial items
|
||||
_lazyLoadItems();
|
||||
|
||||
// bind lazy load functions to scroll and resize event
|
||||
// noinspection JSUnresolvedVariable
|
||||
$(config.appendScroll).on("scroll." + namespace + " resize." + namespace, events.e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* prepare items before handle them
|
||||
* @access private
|
||||
* @param {Array|object|jQuery} items
|
||||
* @return {Array|object|jQuery}
|
||||
*/
|
||||
function _prepareItems(items) {
|
||||
// fetch used configurations before loops
|
||||
var defaultImage = config.defaultImage,
|
||||
placeholder = config.placeholder,
|
||||
imageBase = config.imageBase,
|
||||
srcsetAttribute = config.srcsetAttribute,
|
||||
loaderAttribute = config.loaderAttribute,
|
||||
forcedTags = config._f || {};
|
||||
|
||||
// filter items and only add those who not handled yet and got needed attributes available
|
||||
items = $(items).filter(function() {
|
||||
var element = $(this),
|
||||
tag = _getElementTagName(this);
|
||||
|
||||
return !element.data(config.handledName) &&
|
||||
(element.attr(config.attribute) || element.attr(srcsetAttribute) || element.attr(loaderAttribute) || forcedTags[tag] !== undefined);
|
||||
})
|
||||
|
||||
// append plugin instance to all elements
|
||||
.data("plugin_" + config.name, instance);
|
||||
|
||||
for( var i = 0, l = items.length; i < l; i++ ) {
|
||||
var element = $(items[i]),
|
||||
tag = _getElementTagName(items[i]),
|
||||
elementImageBase = element.attr(config.imageBaseAttribute) || imageBase;
|
||||
|
||||
// generate and update source set if an image base is set
|
||||
if( tag === _img && elementImageBase && element.attr(srcsetAttribute) ) {
|
||||
element.attr(srcsetAttribute, _getCorrectedSrcSet(element.attr(srcsetAttribute), elementImageBase));
|
||||
}
|
||||
|
||||
// add loader to forced element types
|
||||
if( forcedTags[tag] !== undefined && !element.attr(loaderAttribute) ) {
|
||||
element.attr(loaderAttribute, forcedTags[tag]);
|
||||
}
|
||||
|
||||
// set default image on every element without source
|
||||
if( tag === _img && defaultImage && !element.attr(_src) ) {
|
||||
element.attr(_src, defaultImage);
|
||||
}
|
||||
|
||||
// set placeholder on every element without background image
|
||||
else if( tag !== _img && placeholder && (!element.css(_backgroundImage) || element.css(_backgroundImage) === "none") ) {
|
||||
element.css(_backgroundImage, "url('" + placeholder + "')");
|
||||
}
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
/**
|
||||
* the 'lazy magic' - check all items
|
||||
* @access private
|
||||
* @param {boolean} [allItems]
|
||||
* @param {object} [forced]
|
||||
* @return void
|
||||
*/
|
||||
function _lazyLoadItems(allItems, forced) {
|
||||
// skip if no items where left
|
||||
if( !items.length ) {
|
||||
// destroy instance if option is enabled
|
||||
if( config.autoDestroy ) {
|
||||
// noinspection JSUnresolvedFunction
|
||||
instance.destroy();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var elements = forced || items,
|
||||
loadTriggered = false,
|
||||
imageBase = config.imageBase || "",
|
||||
srcsetAttribute = config.srcsetAttribute,
|
||||
handledName = config.handledName;
|
||||
|
||||
// loop all available items
|
||||
for( var i = 0; i < elements.length; i++ ) {
|
||||
// item is at least in loadable area
|
||||
if( allItems || forced || _isInLoadableArea(elements[i]) ) {
|
||||
var element = $(elements[i]),
|
||||
tag = _getElementTagName(elements[i]),
|
||||
attribute = element.attr(config.attribute),
|
||||
elementImageBase = element.attr(config.imageBaseAttribute) || imageBase,
|
||||
customLoader = element.attr(config.loaderAttribute);
|
||||
|
||||
// is not already handled
|
||||
if( !element.data(handledName) &&
|
||||
// and is visible or visibility doesn't matter
|
||||
(!config.visibleOnly || element.is(":visible")) && (
|
||||
// and image source or source set attribute is available
|
||||
(attribute || element.attr(srcsetAttribute)) && (
|
||||
// and is image tag where attribute is not equal source or source set
|
||||
(tag === _img && (elementImageBase + attribute !== element.attr(_src) || element.attr(srcsetAttribute) !== element.attr(_srcset))) ||
|
||||
// or is non image tag where attribute is not equal background
|
||||
(tag !== _img && elementImageBase + attribute !== element.css(_backgroundImage))
|
||||
) ||
|
||||
// or custom loader is available
|
||||
customLoader ))
|
||||
{
|
||||
// mark element always as handled as this point to prevent double handling
|
||||
loadTriggered = true;
|
||||
element.data(handledName, true);
|
||||
|
||||
// load item
|
||||
_handleItem(element, tag, elementImageBase, customLoader);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// when something was loaded remove them from remaining items
|
||||
if( loadTriggered ) {
|
||||
items = $(items).filter(function() {
|
||||
return !$(this).data(handledName);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* load the given element the lazy way
|
||||
* @access private
|
||||
* @param {object} element
|
||||
* @param {string} tag
|
||||
* @param {string} imageBase
|
||||
* @param {function} [customLoader]
|
||||
* @return void
|
||||
*/
|
||||
function _handleItem(element, tag, imageBase, customLoader) {
|
||||
// increment count of items waiting for after load
|
||||
++_awaitingAfterLoad;
|
||||
|
||||
// extended error callback for correct 'onFinishedAll' handling
|
||||
var errorCallback = function() {
|
||||
_triggerCallback("onError", element);
|
||||
_reduceAwaiting();
|
||||
|
||||
// prevent further callback calls
|
||||
errorCallback = $.noop;
|
||||
};
|
||||
|
||||
// trigger function before loading image
|
||||
_triggerCallback("beforeLoad", element);
|
||||
|
||||
// fetch all double used data here for better code minimization
|
||||
var srcAttribute = config.attribute,
|
||||
srcsetAttribute = config.srcsetAttribute,
|
||||
sizesAttribute = config.sizesAttribute,
|
||||
retinaAttribute = config.retinaAttribute,
|
||||
removeAttribute = config.removeAttribute,
|
||||
loadedName = config.loadedName,
|
||||
elementRetina = element.attr(retinaAttribute);
|
||||
|
||||
// handle custom loader
|
||||
if( customLoader ) {
|
||||
// on load callback
|
||||
var loadCallback = function() {
|
||||
// remove attribute from element
|
||||
if( removeAttribute ) {
|
||||
element.removeAttr(config.loaderAttribute);
|
||||
}
|
||||
|
||||
// mark element as loaded
|
||||
element.data(loadedName, true);
|
||||
|
||||
// call after load event
|
||||
_triggerCallback(_afterLoad, element);
|
||||
|
||||
// remove item from waiting queue and possibly trigger finished event
|
||||
// it's needed to be asynchronous to run after filter was in _lazyLoadItems
|
||||
setTimeout(_reduceAwaiting, 1);
|
||||
|
||||
// prevent further callback calls
|
||||
loadCallback = $.noop;
|
||||
};
|
||||
|
||||
// bind error event to trigger callback and reduce waiting amount
|
||||
element.off(_error).one(_error, errorCallback)
|
||||
|
||||
// bind after load callback to element
|
||||
.one(_load, loadCallback);
|
||||
|
||||
// trigger custom loader and handle response
|
||||
if( !_triggerCallback(customLoader, element, function(response) {
|
||||
if( response ) {
|
||||
element.off(_load);
|
||||
loadCallback();
|
||||
}
|
||||
else {
|
||||
element.off(_error);
|
||||
errorCallback();
|
||||
}
|
||||
})) element.trigger(_error);
|
||||
}
|
||||
|
||||
// handle images
|
||||
else {
|
||||
// create image object
|
||||
var imageObj = $(new Image());
|
||||
|
||||
// bind error event to trigger callback and reduce waiting amount
|
||||
imageObj.one(_error, errorCallback)
|
||||
|
||||
// bind after load callback to image
|
||||
.one(_load, function() {
|
||||
// remove element from view
|
||||
element.hide();
|
||||
|
||||
// set image back to element
|
||||
// do it as single 'attr' calls, to be sure 'src' is set after 'srcset'
|
||||
if( tag === _img ) {
|
||||
element.attr(_sizes, imageObj.attr(_sizes))
|
||||
.attr(_srcset, imageObj.attr(_srcset))
|
||||
.attr(_src, imageObj.attr(_src));
|
||||
}
|
||||
else {
|
||||
element.css(_backgroundImage, "url('" + imageObj.attr(_src) + "')");
|
||||
}
|
||||
|
||||
// bring it back with some effect!
|
||||
element[config.effect](config.effectTime);
|
||||
|
||||
// remove attribute from element
|
||||
if( removeAttribute ) {
|
||||
element.removeAttr(srcAttribute + " " + srcsetAttribute + " " + retinaAttribute + " " + config.imageBaseAttribute);
|
||||
|
||||
// only remove 'sizes' attribute, if it was a custom one
|
||||
if( sizesAttribute !== _sizes ) {
|
||||
element.removeAttr(sizesAttribute);
|
||||
}
|
||||
}
|
||||
|
||||
// mark element as loaded
|
||||
element.data(loadedName, true);
|
||||
|
||||
// call after load event
|
||||
_triggerCallback(_afterLoad, element);
|
||||
|
||||
// cleanup image object
|
||||
imageObj.remove();
|
||||
|
||||
// remove item from waiting queue and possibly trigger finished event
|
||||
_reduceAwaiting();
|
||||
});
|
||||
|
||||
// set sources
|
||||
// do it as single 'attr' calls, to be sure 'src' is set after 'srcset'
|
||||
var imageSrc = (_isRetinaDisplay && elementRetina ? elementRetina : element.attr(srcAttribute)) || "";
|
||||
imageObj.attr(_sizes, element.attr(sizesAttribute))
|
||||
.attr(_srcset, element.attr(srcsetAttribute))
|
||||
.attr(_src, imageSrc ? imageBase + imageSrc : null);
|
||||
|
||||
// call after load even on cached image
|
||||
imageObj.complete && imageObj.trigger(_load); // jshint ignore : line
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* check if the given element is inside the current viewport or threshold
|
||||
* @access private
|
||||
* @param {object} element
|
||||
* @return {boolean}
|
||||
*/
|
||||
function _isInLoadableArea(element) {
|
||||
var elementBound = element.getBoundingClientRect(),
|
||||
direction = config.scrollDirection,
|
||||
threshold = config.threshold,
|
||||
vertical = // check if element is in loadable area from top
|
||||
((_getActualHeight() + threshold) > elementBound.top) &&
|
||||
// check if element is even in loadable are from bottom
|
||||
(-threshold < elementBound.bottom),
|
||||
horizontal = // check if element is in loadable area from left
|
||||
((_getActualWidth() + threshold) > elementBound.left) &&
|
||||
// check if element is even in loadable area from right
|
||||
(-threshold < elementBound.right);
|
||||
|
||||
if( direction === "vertical" ) {
|
||||
return vertical;
|
||||
}
|
||||
else if( direction === "horizontal" ) {
|
||||
return horizontal;
|
||||
}
|
||||
|
||||
return vertical && horizontal;
|
||||
}
|
||||
|
||||
/**
|
||||
* receive the current viewed width of the browser
|
||||
* @access private
|
||||
* @return {number}
|
||||
*/
|
||||
function _getActualWidth() {
|
||||
return _actualWidth >= 0 ? _actualWidth : (_actualWidth = $(window).width());
|
||||
}
|
||||
|
||||
/**
|
||||
* receive the current viewed height of the browser
|
||||
* @access private
|
||||
* @return {number}
|
||||
*/
|
||||
function _getActualHeight() {
|
||||
return _actualHeight >= 0 ? _actualHeight : (_actualHeight = $(window).height());
|
||||
}
|
||||
|
||||
/**
|
||||
* get lowercase tag name of an element
|
||||
* @access private
|
||||
* @param {object} element
|
||||
* @returns {string}
|
||||
*/
|
||||
function _getElementTagName(element) {
|
||||
return element.tagName.toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* prepend image base to all srcset entries
|
||||
* @access private
|
||||
* @param {string} srcset
|
||||
* @param {string} imageBase
|
||||
* @returns {string}
|
||||
*/
|
||||
function _getCorrectedSrcSet(srcset, imageBase) {
|
||||
if( imageBase ) {
|
||||
// trim, remove unnecessary spaces and split entries
|
||||
var entries = srcset.split(",");
|
||||
srcset = "";
|
||||
|
||||
for( var i = 0, l = entries.length; i < l; i++ ) {
|
||||
srcset += imageBase + entries[i].trim() + (i !== l - 1 ? "," : "");
|
||||
}
|
||||
}
|
||||
|
||||
return srcset;
|
||||
}
|
||||
|
||||
/**
|
||||
* helper function to throttle down event triggering
|
||||
* @access private
|
||||
* @param {number} delay
|
||||
* @param {function} callback
|
||||
* @return {function}
|
||||
*/
|
||||
function _throttle(delay, callback) {
|
||||
var timeout,
|
||||
lastExecute = 0;
|
||||
|
||||
return function(event, ignoreThrottle) {
|
||||
var elapsed = +new Date() - lastExecute;
|
||||
|
||||
function run() {
|
||||
lastExecute = +new Date();
|
||||
// noinspection JSUnresolvedFunction
|
||||
callback.call(instance, event);
|
||||
}
|
||||
|
||||
timeout && clearTimeout(timeout); // jshint ignore : line
|
||||
|
||||
if( elapsed > delay || !config.enableThrottle || ignoreThrottle ) {
|
||||
run();
|
||||
}
|
||||
else {
|
||||
timeout = setTimeout(run, delay - elapsed);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* reduce count of awaiting elements to 'afterLoad' event and fire 'onFinishedAll' if reached zero
|
||||
* @access private
|
||||
* @return void
|
||||
*/
|
||||
function _reduceAwaiting() {
|
||||
--_awaitingAfterLoad;
|
||||
|
||||
// if no items were left trigger finished event
|
||||
if( !items.length && !_awaitingAfterLoad ) {
|
||||
_triggerCallback("onFinishedAll");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* single implementation to handle callbacks, pass element and set 'this' to current instance
|
||||
* @access private
|
||||
* @param {string|function} callback
|
||||
* @param {object} [element]
|
||||
* @param {*} [args]
|
||||
* @return {boolean}
|
||||
*/
|
||||
function _triggerCallback(callback, element, args) {
|
||||
if( (callback = config[callback]) ) {
|
||||
// jQuery's internal '$(arguments).slice(1)' are causing problems at least on old iPads
|
||||
// below is shorthand of 'Array.prototype.slice.call(arguments, 1)'
|
||||
callback.apply(instance, [].slice.call(arguments, 1));
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// if event driven or window is already loaded don't wait for page loading
|
||||
if( config.bind === "event" || windowLoaded ) {
|
||||
_initialize();
|
||||
}
|
||||
|
||||
// otherwise load initial items and start lazy after page load
|
||||
else {
|
||||
// noinspection JSUnresolvedVariable
|
||||
$(window).on(_load + "." + namespace, _initialize);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* lazy plugin class constructor
|
||||
* @constructor
|
||||
* @access private
|
||||
* @param {object} elements
|
||||
* @param {object} settings
|
||||
* @return {object|LazyPlugin}
|
||||
*/
|
||||
function LazyPlugin(elements, settings) {
|
||||
/**
|
||||
* this lazy plugin instance
|
||||
* @access private
|
||||
* @type {object|LazyPlugin|LazyPlugin.prototype}
|
||||
*/
|
||||
var _instance = this,
|
||||
|
||||
/**
|
||||
* this lazy plugin instance configuration
|
||||
* @access private
|
||||
* @type {object}
|
||||
*/
|
||||
_config = $.extend({}, _instance.config, settings),
|
||||
|
||||
/**
|
||||
* instance generated event executed on container scroll or resize
|
||||
* packed in an object to be referenceable and short named because properties will not be minified
|
||||
* @access private
|
||||
* @type {object}
|
||||
*/
|
||||
_events = {},
|
||||
|
||||
/**
|
||||
* unique namespace for instance related events
|
||||
* @access private
|
||||
* @type {string}
|
||||
*/
|
||||
_namespace = _config.name + "-" + (++lazyInstanceId);
|
||||
|
||||
// noinspection JSUndefinedPropertyAssignment
|
||||
/**
|
||||
* wrapper to get or set an entry from plugin instance configuration
|
||||
* much smaller on minify as direct access
|
||||
* @access public
|
||||
* @type {function}
|
||||
* @param {string} entryName
|
||||
* @param {*} [value]
|
||||
* @return {LazyPlugin|*}
|
||||
*/
|
||||
_instance.config = function(entryName, value) {
|
||||
if( value === undefined ) {
|
||||
return _config[entryName];
|
||||
}
|
||||
|
||||
_config[entryName] = value;
|
||||
return _instance;
|
||||
};
|
||||
|
||||
// noinspection JSUndefinedPropertyAssignment
|
||||
/**
|
||||
* add additional items to current instance
|
||||
* @access public
|
||||
* @param {Array|object|string} items
|
||||
* @return {LazyPlugin}
|
||||
*/
|
||||
_instance.addItems = function(items) {
|
||||
_events.a && _events.a($.type(items) === "string" ? $(items) : items); // jshint ignore : line
|
||||
return _instance;
|
||||
};
|
||||
|
||||
// noinspection JSUndefinedPropertyAssignment
|
||||
/**
|
||||
* get all left items of this instance
|
||||
* @access public
|
||||
* @returns {object}
|
||||
*/
|
||||
_instance.getItems = function() {
|
||||
return _events.g ? _events.g() : {};
|
||||
};
|
||||
|
||||
// noinspection JSUndefinedPropertyAssignment
|
||||
/**
|
||||
* force lazy to load all items in loadable area right now
|
||||
* by default without throttle
|
||||
* @access public
|
||||
* @type {function}
|
||||
* @param {boolean} [useThrottle]
|
||||
* @return {LazyPlugin}
|
||||
*/
|
||||
_instance.update = function(useThrottle) {
|
||||
_events.e && _events.e({}, !useThrottle); // jshint ignore : line
|
||||
return _instance;
|
||||
};
|
||||
|
||||
// noinspection JSUndefinedPropertyAssignment
|
||||
/**
|
||||
* force element(s) to load directly, ignoring the viewport
|
||||
* @access public
|
||||
* @param {Array|object|string} items
|
||||
* @return {LazyPlugin}
|
||||
*/
|
||||
_instance.force = function(items) {
|
||||
_events.f && _events.f($.type(items) === "string" ? $(items) : items); // jshint ignore : line
|
||||
return _instance;
|
||||
};
|
||||
|
||||
// noinspection JSUndefinedPropertyAssignment
|
||||
/**
|
||||
* force lazy to load all available items right now
|
||||
* this call ignores throttling
|
||||
* @access public
|
||||
* @type {function}
|
||||
* @return {LazyPlugin}
|
||||
*/
|
||||
_instance.loadAll = function() {
|
||||
_events.e && _events.e({all: true}, true); // jshint ignore : line
|
||||
return _instance;
|
||||
};
|
||||
|
||||
// noinspection JSUndefinedPropertyAssignment
|
||||
/**
|
||||
* destroy this plugin instance
|
||||
* @access public
|
||||
* @type {function}
|
||||
* @return undefined
|
||||
*/
|
||||
_instance.destroy = function() {
|
||||
// unbind instance generated events
|
||||
// noinspection JSUnresolvedFunction, JSUnresolvedVariable
|
||||
$(_config.appendScroll).off("." + _namespace, _events.e);
|
||||
// noinspection JSUnresolvedVariable
|
||||
$(window).off("." + _namespace);
|
||||
|
||||
// clear events
|
||||
_events = {};
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
// start using lazy and return all elements to be chainable or instance for further use
|
||||
// noinspection JSUnresolvedVariable
|
||||
_executeLazy(_instance, _config, elements, _events, _namespace);
|
||||
return _config.chainable ? elements : _instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* settings and configuration data
|
||||
* @access public
|
||||
* @type {object}
|
||||
*/
|
||||
LazyPlugin.prototype.config = {
|
||||
// general
|
||||
name : "lazy",
|
||||
chainable : true,
|
||||
autoDestroy : true,
|
||||
bind : "load",
|
||||
threshold : 500,
|
||||
visibleOnly : false,
|
||||
appendScroll : window,
|
||||
scrollDirection : "both",
|
||||
imageBase : null,
|
||||
defaultImage : "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
|
||||
placeholder : null,
|
||||
delay : -1,
|
||||
combined : false,
|
||||
|
||||
// attributes
|
||||
attribute : "data-src",
|
||||
srcsetAttribute : "data-srcset",
|
||||
sizesAttribute : "data-sizes",
|
||||
retinaAttribute : "data-retina",
|
||||
loaderAttribute : "data-loader",
|
||||
imageBaseAttribute : "data-imagebase",
|
||||
removeAttribute : true,
|
||||
handledName : "handled",
|
||||
loadedName : "loaded",
|
||||
|
||||
// effect
|
||||
effect : "show",
|
||||
effectTime : 0,
|
||||
|
||||
// throttle
|
||||
enableThrottle : true,
|
||||
throttle : 250,
|
||||
|
||||
// callbacks
|
||||
beforeLoad : undefined,
|
||||
afterLoad : undefined,
|
||||
onError : undefined,
|
||||
onFinishedAll : undefined
|
||||
};
|
||||
|
||||
// register window load event globally to prevent not loading elements
|
||||
// since jQuery 3.X ready state is fully async and may be executed after 'load'
|
||||
$(window).on("load", function() {
|
||||
windowLoaded = true;
|
||||
});
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! jQuery & Zepto Lazy v1.7.6 - http://jquery.eisbehr.de/lazy - MIT&GPL-2.0 license - Copyright 2012-2017 Daniel 'Eisbehr' Kern */
|
||||
!function(t,e){"use strict";function r(r,a,i,u,l){function f(){L=t.devicePixelRatio>1,i=c(i),a.delay>=0&&setTimeout(function(){s(!0)},a.delay),(a.delay<0||a.combined)&&(u.e=v(a.throttle,function(t){"resize"===t.type&&(w=B=-1),s(t.all)}),u.a=function(t){t=c(t),i.push.apply(i,t)},u.g=function(){return i=n(i).filter(function(){return!n(this).data(a.loadedName)})},u.f=function(t){for(var e=0;e<t.length;e++){var r=i.filter(function(){return this===t[e]});r.length&&s(!1,r)}},s(),n(a.appendScroll).on("scroll."+l+" resize."+l,u.e))}function c(t){var i=a.defaultImage,o=a.placeholder,u=a.imageBase,l=a.srcsetAttribute,f=a.loaderAttribute,c=a._f||{};t=n(t).filter(function(){var t=n(this),r=m(this);return!t.data(a.handledName)&&(t.attr(a.attribute)||t.attr(l)||t.attr(f)||c[r]!==e)}).data("plugin_"+a.name,r);for(var s=0,d=t.length;s<d;s++){var A=n(t[s]),g=m(t[s]),h=A.attr(a.imageBaseAttribute)||u;g===N&&h&&A.attr(l)&&A.attr(l,b(A.attr(l),h)),c[g]===e||A.attr(f)||A.attr(f,c[g]),g===N&&i&&!A.attr(E)?A.attr(E,i):g===N||!o||A.css(O)&&"none"!==A.css(O)||A.css(O,"url('"+o+"')")}return t}function s(t,e){if(!i.length)return void(a.autoDestroy&&r.destroy());for(var o=e||i,u=!1,l=a.imageBase||"",f=a.srcsetAttribute,c=a.handledName,s=0;s<o.length;s++)if(t||e||A(o[s])){var g=n(o[s]),h=m(o[s]),b=g.attr(a.attribute),v=g.attr(a.imageBaseAttribute)||l,p=g.attr(a.loaderAttribute);g.data(c)||a.visibleOnly&&!g.is(":visible")||!((b||g.attr(f))&&(h===N&&(v+b!==g.attr(E)||g.attr(f)!==g.attr(F))||h!==N&&v+b!==g.css(O))||p)||(u=!0,g.data(c,!0),d(g,h,v,p))}u&&(i=n(i).filter(function(){return!n(this).data(c)}))}function d(t,e,r,i){++z;var o=function(){y("onError",t),p(),o=n.noop};y("beforeLoad",t);var u=a.attribute,l=a.srcsetAttribute,f=a.sizesAttribute,c=a.retinaAttribute,s=a.removeAttribute,d=a.loadedName,A=t.attr(c);if(i){var g=function(){s&&t.removeAttr(a.loaderAttribute),t.data(d,!0),y(T,t),setTimeout(p,1),g=n.noop};t.off(I).one(I,o).one(D,g),y(i,t,function(e){e?(t.off(D),g()):(t.off(I),o())})||t.trigger(I)}else{var h=n(new Image);h.one(I,o).one(D,function(){t.hide(),e===N?t.attr(C,h.attr(C)).attr(F,h.attr(F)).attr(E,h.attr(E)):t.css(O,"url('"+h.attr(E)+"')"),t[a.effect](a.effectTime),s&&(t.removeAttr(u+" "+l+" "+c+" "+a.imageBaseAttribute),f!==C&&t.removeAttr(f)),t.data(d,!0),y(T,t),h.remove(),p()});var m=(L&&A?A:t.attr(u))||"";h.attr(C,t.attr(f)).attr(F,t.attr(l)).attr(E,m?r+m:null),h.complete&&h.trigger(D)}}function A(t){var e=t.getBoundingClientRect(),r=a.scrollDirection,n=a.threshold,i=h()+n>e.top&&-n<e.bottom,o=g()+n>e.left&&-n<e.right;return"vertical"===r?i:"horizontal"===r?o:i&&o}function g(){return w>=0?w:w=n(t).width()}function h(){return B>=0?B:B=n(t).height()}function m(t){return t.tagName.toLowerCase()}function b(t,e){if(e){var r=t.split(",");t="";for(var a=0,n=r.length;a<n;a++)t+=e+r[a].trim()+(a!==n-1?",":"")}return t}function v(t,e){var n,i=0;return function(o,u){function l(){i=+new Date,e.call(r,o)}var f=+new Date-i;n&&clearTimeout(n),f>t||!a.enableThrottle||u?l():n=setTimeout(l,t-f)}}function p(){--z,i.length||z||y("onFinishedAll")}function y(t,e,n){return!!(t=a[t])&&(t.apply(r,[].slice.call(arguments,1)),!0)}var z=0,w=-1,B=-1,L=!1,T="afterLoad",D="load",I="error",N="img",E="src",F="srcset",C="sizes",O="background-image";"event"===a.bind||o?f():n(t).on(D+"."+l,f)}function a(a,o){var u=this,l=n.extend({},u.config,o),f={},c=l.name+"-"+ ++i;return u.config=function(t,r){return r===e?l[t]:(l[t]=r,u)},u.addItems=function(t){return f.a&&f.a("string"===n.type(t)?n(t):t),u},u.getItems=function(){return f.g?f.g():{}},u.update=function(t){return f.e&&f.e({},!t),u},u.force=function(t){return f.f&&f.f("string"===n.type(t)?n(t):t),u},u.loadAll=function(){return f.e&&f.e({all:!0},!0),u},u.destroy=function(){return n(l.appendScroll).off("."+c,f.e),n(t).off("."+c),f={},e},r(u,l,a,f,c),l.chainable?a:u}var n=t.jQuery||t.Zepto,i=0,o=!1;n.fn.Lazy=n.fn.lazy=function(t){return new a(this,t)},n.Lazy=n.lazy=function(t,r,i){if(n.isFunction(r)&&(i=r,r=[]),n.isFunction(i)){t=n.isArray(t)?t:[t],r=n.isArray(r)?r:[r];for(var o=a.prototype.config,u=o._f||(o._f={}),l=0,f=t.length;l<f;l++)(o[t[l]]===e||n.isFunction(o[t[l]]))&&(o[t[l]]=i);for(var c=0,s=r.length;c<s;c++)u[r[c]]=t[0]}},a.prototype.config={name:"lazy",chainable:!0,autoDestroy:!0,bind:"load",threshold:500,visibleOnly:!1,appendScroll:t,scrollDirection:"both",imageBase:null,defaultImage:"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",placeholder:null,delay:-1,combined:!1,attribute:"data-src",srcsetAttribute:"data-srcset",sizesAttribute:"data-sizes",retinaAttribute:"data-retina",loaderAttribute:"data-loader",imageBaseAttribute:"data-imagebase",removeAttribute:!0,handledName:"handled",loadedName:"loaded",effect:"show",effectTime:0,enableThrottle:!0,throttle:250,beforeLoad:e,afterLoad:e,onError:e,onFinishedAll:e},n(t).on("load",function(){o=!0})}(window);
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
/**
|
||||
* jQuery Unveil
|
||||
* A very lightweight jQuery plugin to lazy load images
|
||||
* http://luis-almeida.github.com/unveil
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
* Copyright 2013 Luís Almeida
|
||||
* https://github.com/luis-almeida
|
||||
*/
|
||||
|
||||
;(function($) {
|
||||
|
||||
$.fn.unveil = function(threshold, callback) {
|
||||
|
||||
var $w = $(window),
|
||||
th = threshold || 0,
|
||||
retina = window.devicePixelRatio > 1,
|
||||
attrib = retina? "data-src-retina" : "data-src",
|
||||
images = this,
|
||||
loaded;
|
||||
|
||||
this.one("unveil", function() {
|
||||
var source = this.getAttribute(attrib);
|
||||
source = source || this.getAttribute("data-src");
|
||||
if (source) {
|
||||
this.setAttribute("src", source);
|
||||
if (typeof callback === "function") callback.call(this);
|
||||
}
|
||||
});
|
||||
|
||||
function unveil() {
|
||||
var inview = images.filter(function() {
|
||||
var $e = $(this);
|
||||
if ($e.is(":hidden")) return;
|
||||
|
||||
var wt = $w.scrollTop(),
|
||||
wb = wt + $w.height(),
|
||||
et = $e.offset().top,
|
||||
eb = et + $e.height();
|
||||
|
||||
return eb >= wt - th && et <= wb + th;
|
||||
});
|
||||
|
||||
loaded = inview.trigger("unveil");
|
||||
images = images.not(loaded);
|
||||
}
|
||||
|
||||
$w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
|
||||
|
||||
unveil();
|
||||
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
})(window.jQuery || window.Zepto);
|
||||
|
|
@ -8739,7 +8739,7 @@ $imagen = remplacetas('form_datos','control',$row['control'],'contenido',"id_cam
|
|||
|
||||
$titulo = remplacetas('form_datos','control',$row['control'],'contenido',"id_campo = '$campo_nombre'") ;
|
||||
$contenido_desplegado ="
|
||||
<div style=' min-height: 500px; height: 500px;
|
||||
<div class='lazy' style=' min-height: 500px; height: 500px;
|
||||
background-image: url($_SESSION[url]images/secure/?file=600/$imagen[0]);
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
|
|
@ -8765,7 +8765,7 @@ $imagen = remplacetas('form_datos','control',$row['control'],'contenido',"id_cam
|
|||
|
||||
|
||||
|
||||
$indicadores .= "<div><img height='50px' width='100px' src='$_SESSION[url]images/secure/?file=150/$imagen[0]'></div>";
|
||||
$indicadores .= "<div><img height='50px' width='100px' data-src='$_SESSION[url]images/secure/?file=150/$imagen[0]' src='$_SESSION[url]images/secure/?file=150/$imagen[0]'></div>";
|
||||
$titulo = remplacetas('form_datos','id',$identificador,'contenido',"") ;
|
||||
//$contenido .= "$contenido_desplegado ";
|
||||
$ordenado = ($ordenado +1 );
|
||||
|
|
@ -11057,7 +11057,7 @@ if (mysqli_num_rows($sql)!='0'){
|
|||
if($imagen[3] != null AND $tipo !='titulos') {
|
||||
$array[image]=$imagen;
|
||||
$imagen_icon="secure/?file=150/$imagen";
|
||||
$imagen= "<img class='thumbnail' src='images/secure/?file=150/$imagen' alt='$imagen' style='max-width:100px;' title='$imagen'>";
|
||||
$imagen= "<img class='thumbnail' data-src='images/secure/?file=150/$imagen' src='images/secure/?file=150/$imagen' alt='$imagen' style='max-width:100px;' title='$imagen'>";
|
||||
$td .= "<td class='planilla_$row[id_campo]' >$imagen</td>";
|
||||
}else {$imagen='';}
|
||||
|
||||
|
|
@ -11103,7 +11103,7 @@ $td .= "<td class='planilla_$row[id_campo]' >$imagen</td>";
|
|||
}else {
|
||||
$size="150" ;
|
||||
}
|
||||
if($contenido !=""){$contenido = "<img class='img img-responsive' style='max-height: $size"."px !important;' src='$_SESSION[site]milfs/images/secure/?file=$size/$contenido'>"; }
|
||||
if($contenido !=""){$contenido = "<img class=' lazy img img-responsive' data-src='$_SESSION[site]milfs/images/secure/?file=$size/$contenido' style='max-height: $size"."px !important;' src=''>"; }
|
||||
else{$contenido="";}
|
||||
}
|
||||
elseif($campo_tipo=='14'){
|
||||
|
|
|
|||
Loading…
Reference in New Issue