(Resolvido) Detectar Exibição de Imagem

[Douglas Nogueira]

Senhores(as),

Tenho o seguinte problema, tenho uma DIV que possui scrollbars, essa div está repleta de imagens, agora, o que preciso é de uma função que me retorne a imagem que aparece no navegador do usuário enquanto ele passa as imagens, retornando o ID da página atual que ele está visualizando. Estou tentando fazer um visualizador de documentos baseado em javascript, e preciso saber a página atual que o usuário está lendo para pré carregar uma quantidade definida das páginas seguintes, para evitar que o navegador baixe todas as imagens de uma vez e que o usuário tenha que ficar esperando carregar a imagem toda vez que muda de página, baixar todas as imagens tornaria o gasto de banda muito grande e processamento das imagens no servidor, uma vez que são extraídas de PDF quando visualizadas, e são milhares de imagens.

<div id='ConteudoDocReader' style={	position:absolute; float:right; overflow:auto;}>
	<a name="1"/>
	<img src="pagina1.png" id="1" width="800" height="1200"><br>
	<a name="2"/>
	<img src="pagina2.png" id="2" width="800" height="1200"><br>
	<a name="3"/>
	<img src="pagina3.png" id="3" width="800" height="1200"><br>
	<a name="4"/>
	<img src="pagina4.png" id="4" width="800" height="1200"><br>
	<a name="5"/>
	<img src="pagina5.png" id="5" width="800" height="1200"><br>
</div>
[/codebox]

Seria uma funcionalidade parecida com a do Google Docs Viewer (http://docs.google.com/viewer), so que não tem como eu usá-lo, uma vez que os documentos são de acesso retrito.

Grato pela atenção dispensada,

Douglas

Editado Julho 24, 2010 por Douglas Nogueira

[Douglas Nogueira]

É uma pena que ninguém me ajudou a poupar algumas horinhas quebrando a cabeça, mas encontrei uma solução!

//executa positionDetection a cada 100 milesimos de segundo
function startDetection(){
	setInterval("positionDetection()",100);
}

function positionDetection(){
	var div = document.getElementById('ConteudoDocReader'); //DIV com ScrollBar
	var elements = div.getElementsByTagName("img"); //Elementos de Imagem da DIV
	var position = div.scrollTop; //atual posição da scrollbar 
	for(var i = 0, max = elements.length; i < max; ++i) {//para cada elemento de imagem da div
		//Se ponto de inicio do elemento de imagem for maior que a posição da scrollbar
		//somada com metade da altura da DIV
		if(elements[i].offsetTop < position+(div.clientHeight/2)){
			var CurrentElement = elements[i]; //Então imagem sendo exibida é o elemento atual
		}
	}
	return CurrentElement;
}
[/codebox]

É meio estranho responder a si mesmo mas fica aí para referências futuras para algum maluco que for se aventurar pelas mesmas águas!

Valeu!

Douglas

PS: Se alguém souber uma outra maneira ficarei feliz em avaliá-la!