(Resolvido) Falha de Sincronia do Objeto de Imagem em função Ajax JQue

[Douglas Nogueira]

PessoALL,

No meu projeto de visualizador de documentos onde um pdf é transformado em imagem para visualização rápida na web, eu utilizo a seguinte função para carregar cada página que é exibida

function loadPage(page){
	var img = document.getElementById(page);
	if(img.loaded != true){
		var newimage = new Image();
		$.ajax({
			url: getPageURI(page),
			beforeSend:  function(){
					img.src = 'img/loading.png';
					img.width = img.naturalWidth * ZoomStatus;
					img.height = img.naturalHeight * ZoomStatus;
				},
			error: function(){
					img.src = 'img/error.png';
					img.width = img.naturalWidth * ZoomStatus;
					img.height = img.naturalHeight * ZoomStatus;
				},
			success: function(data){
					newimage.loaded = true;
					newimage.src = getPageURI(page);
					newimage.className = img.className
					newimage.id = img.id;
					newimage.width = newimage.naturalWidth * ZoomStatus;
					newimage.height = newimage.naturalHeight * ZoomStatus;
					$(img).replaceWith(newimage);
				}
		});
	}
}
[/codebox]

Onde essa função carrega as imagens na seguinte div:

[codebox]
<div id="ConteudoDocReader">
<a value="1">
<img id="1" class="PaginaDocReader" src="img/blank.png">
</a>
<br>
<a value="2">
<img id="2" class="PaginaDocReader" src="img/blank.png">
</a>
<br>
<a value="3">
<img id="3" class="PaginaDocReader" src="img/blank.png">
</a>
<br>
</div>

Acontece que quando a função 'success' é executada no momento que o calculo do tamanho do width e do height são gerados, o naturalWidth e o naturalHeight não estão disponíveis ou são '0' logo a imagem assume um proporção nula, e não aparece.

Gostaria de saber como eu faço para assegurar que o os valores do atributo naturalWidth e naturalHeight possuam os valores corretos no momento da chamada.

Alguém tem alguma idéia?

Att Douglas.

Editado Julho 29, 2010 por Douglas Nogueira

[KaKarotto]

Se for problema de sincronismo, então o ajax deve executar apenas se a imagem carregar. Talvez seria interessante se usasse uma função num evento de onload da imagem.

Esse naturalWidth e naturalHeight, de onde tirou essas propriedades ?

Eu sinceramente não as conheço, não sei se é de um objeto que criou ou se é nativo de algum objeto do DOM.

[Douglas Nogueira]

Essas propriedades são do elemento de imagem do HTML 5.0, seguindo aqui a descrição da interface:

Especificação da Interface DOM no W3C:

[NamedConstructor=Image(),

NamedConstructor=Image(in unsigned long width),

NamedConstructor=Image(in unsigned long width, in unsigned long height)]

interface HTMLImageElement : HTMLElement {

attribute DOMString alt;

attribute DOMString src;

attribute DOMString useMap;

attribute boolean isMap;

attribute unsigned long width;

attribute unsigned long height;

readonly attribute unsigned long naturalWidth;

readonly attribute unsigned long naturalHeight;

readonly attribute boolean complete;

};

Elas representam o width e o height da imagem sem redimensionamento, por isso que no meu código ela está sendo multiplicada por um fator de zoom e atribuído a width e height, para as imagens serem exibidas nos tamanhos corretos.

O problema é que a imagem não possui o método onLoad...

Att,

Douglas

Editado Julho 29, 2010 por Douglas Nogueira

[Douglas Nogueira]

KaKarotto,

A sua idéia do onLoad estava certa, não sei onde li que não havia onLoad para imagens, mas colocar o resize no onload deu certo, mas tive que fazer algumas adaptações, pois existe um navegador que não da suporte a essa especificação, nrem preciso dizer qual é né:

O código ficou assim:

function loadPage(page){
		var img = document.getElementById(page);
		if(img.loaded != true){
			$.ajax({
				url: getPageURI(page),
				beforeSend:  function(){
						img.src = 'img/loading.png';
						onLoadResize(img);
					},
				error: function(){
						img.src = 'img/error.png';
						onLoadResize(img);
					},
				success: function(data){
						var newimage = new Image();
						newimage.loaded = true;
						newimage.src = getPageURI(page);
						newimage.className = img.className
						newimage.id = img.id;
						onLoadResize(newimage);
						$(img).replaceWith(newimage);
					}
			});
		}
	}
	function onLoadResize(img){
		if(img.naturalWidth === undefined){ //verifica suporte a naturalWidth e naturalHeight
			img.onLoad = naturalFixResize(img);
		}else{
			img.onload = function(){
				resize(img);
			}
		}
	}
	function naturalFixResize(img){
		img.naturalWidth = img.width;
		img.naturalHeight = img.height
		resize(img);
	}
	function resize(img){
		img.width = img.naturalWidth * ZoomStatus;
		img.height = img.naturalHeight * ZoomStatus;
	}
[/codebox]

Valeu,

Douglas

Editado Julho 29, 2010 por Douglas Nogueira