Plugin JQuery load on-demand JS e CSS e Images

Download da versão 0.98 jquery.include.js 1.4 KB (gzip)
Aplicando:

Demo Dialog (dialog ui)

Demo FancyBox

Segue o plugin descompactado em versão de testes:

; jQuery.include || (function($) {
	$.include = function(url,callback,options){
		var options = $.extend({ target: null, elements: null, eventType: '', count: 0, dataType: [], extension: ''}, options);
		if(typeof url=='object') {
			if ( typeof(url[0].url) != 'undefined' ) {
				while (url.length) {
					var objUrl = url.shift();
					$.include(objUrl.url, objUrl.success);
				}
				return false;
			}
			var dataType = $.extend([], options.dataType);
			options.count = 1;
			if ($.isFunction(callback))
				$.include.call.push({success:callback, target:options.target, elements:options.elements, eventType:options.eventType});
			if (typeof url.length != 'undefined') {
				$.include.count.i+=url.length;
				while (url.length) {
					options.dataType = dataType.shift();
					$.include(url.shift()+'', null, options);
				}
			} else {
				$.each(url, function(){$.include.count.i++});
				$.each(url, function(index, element) {
					options.dataType = dataType.shift();
					$.include(index, element, options);
				});
			}
		} else {
			if($.inArray(url, $.include.past)<0){
				$.include.past.push(url);
				if ((/.js$/.test(url) && options.dataType == '') || (options.dataType == 'js')) {
					$.ajax({
						type: 'GET',
						url: ((/http$/.test(url))?'':$.include.path.js)+url+'',
						dataType: 'script',
						cache: true,
						async: false,
						success: function() {
							$.include.callback(callback, this, $(this), options.count)
						}
					});
				} else if ((/.css$/.test(url) && options.dataType == '') || (options.dataType == 'css')) {
					var link = document.createElement('link'),
					url = ((/http$/.test(url))?'':$.include.path.css)+url+'';
					$(link)
							.attr({'href':url,'rel':'stylesheet','type':'text/css'});
					document.body.appendChild(link);
					$(document).ready(function() {
							$.include.callback(callback, $('link[href="'+url+'"]'), null, options.count)
					});
				} else {
					var img = $.include.img.length;
					$.include.img.push({
						img :
								$('')
									.attr('src',((/http$/.test(url))?'':$.include.path.img)+url+'')
									.bind('load readystatechange', function() {
										$(this).unbind('load readystatechange');
										$.include.callback(callback, this, $(this), options.count) })
									});
				}
			} else {
					callback(callback, options.target, options.elements, options.count);
			}
		}
	};
	$.extend(
		$.include,{
			past:[],
			path:{js:'',css:'',img:''},
			count:{'i':0,'o':0},
			call:[],
			callback: function (callback, target, elements, count) {
				$.include.count.o += count;
				if (typeof callback=='function')
					callback(target, elements);
				if ($.include.count.o==$.include.count.i) {
					while($.include.call.length) {
						var exe = $.include.call.shift();
						$(exe.elements).unbind(exe.eventType);
						exe.success(exe.target, exe.elements, exe.eventType);
					}
				}
			},
			img:[]
		}
	);
	$.fn.include = function(eventType, options) {
		var selectors = $(this);
		if (typeof options != 'undefined') {
			$(this).one(eventType+'', function() {
				if ($.isFunction(options.complete))
					options.complete(this, selectors);
				$.include(options.url, options.success, { target: this, elements: selectors, eventType: options.eventType, dataType: options.dataType});
				return false;
			});
			return false;
		} else {
				$.include(eventType.url, eventType.success, { target: this, elements: selectors });
		}
	};
})(jQuery);
Posted in Demo, eduardo pacheco, jQuery | 1 Comment

IOD – Um novo começo (a fork lazy load)

Como bom ciêntista é bom reconhecer uma melhoria. Encontrei em minhas andanças na internet um sistema baseado em jQuery que faz o mesmo que o IOD, mas com a diferença que é interamente client-side. Fiz algumas melhorias (tornando um fork) e coloquei aqui.

Dêem uma olhada! Ficou bem legal:

Ver exemplo

Posted in eduardo pacheco, google analitycs, images on-demand, iod, phpQuery | Leave a comment

Kanema Images On-Demand

Atualizado 30 de novembro 2009

Erro de cache no tracking corrigido.

Registro no GA ok.

Agora começa os testes de métrica.

————————

Atualizado 26 de novembro 2009

Novidades no plugin, a versão em 0.2.6 beta (em trunk) corrige muitos erros da versão anterior.

Ainda não possui uma configuração avançada em modo visual, mas virá na versão 0.3 aguardem!

Visualize agora no blog também

————————

Essa aplicação é baseada em uma técnica aplicada pelo Youtube e um projeto hospedado no Google Code chamado jquery-images-ondemand.
O código simplesmente detecta a distância do elemento imagem do topo e calcula a posição atual do rodapé da janela. O problema é: mas e quem não usa javascript? Tipo quem? O Google!

Solução
Então montei um sistema baseado em uma framework de php chamada phpQuery que é baseada nas funções da framework de javascript jQuery. A parte de javascript utiliza a própria jQuery. Registrando via eventTracker a quantidade economizada de banda.

Kanema Images On-deman

Versão 0.2 beta
Primeira versão aberta que conta com as funcionalidades beta. Já publicado na lista de plugins da wordpress.

O servidor
Do lado do servidor todas as imagens são colocadas dentro de tags para não serem carregadas diretamente e conservando a estrutura original.
Uma função calcula o tamanho da imagem que será carregada, sendo ela local ou remota, para registrar a quantidade economizada de banda e a velocidade de download do usuário.
As informações dos elementos são colocados dentro da title do noscript, pois para o Internet Explorer tudo que existe dentro de uma tag noscript é nulo.

O browser
Ao carregar a página o javascript lê o cookie para saber quais imagens já foram carregadas anteriormente. Iniciando a carga (em ordem) das imagens em exibição.
Para verificar o funcionamento adicionei um debug que funciona da seguinte forma:
http://www.meusite.com.br/?IODdebug – exibe a janela de debug
http://www.meusite.com.br/?IODclear – limpa o cookie
http://www.meusite.com.br/?IODload – carrega as imagens em sequência.

Configurações
Algumas configurações podem ser feitas (ainda da forma manual) como a distância do rodapé que as imagens começam a ser carregadas, o local da imagem padrão e do loader.
O tempo entre o carregamento das imagens no modo load.

Links
Ver demonstração (sem wordpress)
Baixar código
Baixar código wordpress

Posted in eduardo pacheco, google analitycs, images on-demand, iod, jQuery, phpQuery, plugin wordpress | Leave a comment

Eduardo Stefani Pacheco

Posted in eduardo pacheco, pessoal | Tagged , | Leave a comment