Preload de Imagem em JavaScript

[neo_soro]

Boa noite pessoal,

procurei aqui no fórum e no google, mas não consegui encontrar e nem descobrir uma forma de fazer um preload. Seguinte: criei uma galeria simples em javascript com PHP onde ela pegas as imagens e vai exibindo normamente como uma galeria. hehehehe. Só que seguinte. Na minha máquina, obviamente a transição entre uma imagem e outra é rapida, porém quando eu subo para o webhost demora um pouco carregando a imagem quando troco de uma para a outra, isso porque to fazendo o teste com imagens muito pequenas tipo 13kb.

Só que com certeza serão utilizadas fotos grandes. Queria que vocês me ajudassem a fazer apenas um script que pegasse o tamanho da imagem e fosse informando o quanto ainda falta. não sei se é tão complicado, mas acho que dá. Não precisa ser com imagem aliás gostaria que fosse em texto mesmo, pois pretendo fazer um preload diferente. Me ajudem ae, por favor. =) obrigado.

vou colcoar o código aqui, talvez ajude.

<?
$imagem = $_GET['imagem'];
$dir ="./img";
$dh = opendir($dir);
$n = 1;
$arrGal = array();
while (false !== ($filename = readdir($dh))){
    if ($filename !== '.' AND $filename !== '..' AND substr($filename,-4) == ".JPG" ||substr($filename,-4) == ".jpg" || substr($filename,-5) == ".jpeg"){
        $bbcode = explode("." , $filename);
        $arrGal[$n]= $filename;
        $n++;
    }
}
$num = $n - 1;
?>

<script>
function proxImg(){
    var x = document.getElementById("imgswp").src;
    var y = x.split("/");
    var z = y[7].split(".");
    if (z[0] < <?=$num?>){
        z[0]++        
        i = "img/" + z[0] + ".jpg";        
        document.getElementById("imgswp").src=""+i+"";
    }else{
        i = "img/1.jpg";
        document.getElementById("imgswp").src=""+i+"";
    }
}

function antImg(){
    var x = document.getElementById("imgswp").src;
    var y = x.split("/");
    var z = y[7].split(".");
    if (z[0] < <?=$num?>){
        z[0]--
        if(z[0] == 0){
            i = "img/" + (z[0]+ <?=$num?>) + ".jpg";
        }else{
            i = "img/" + z[0] + ".jpg";
        }
        document.getElementById("imgswp").src=""+i+"";
        //window.alert(a);
    }else{
        i = "img/" + (z[0]-1) + ".jpg";
        document.getElementById("imgswp").src=""+i+"";
    }
}
</script>


<div id="divFoto">

<center><img src=<?=($_GET)?"img/".$imagem:"img/1.jpg"?> id="imgswp"/>    </center>

</div>
<div id="controle">

<div id="controle" class="esq">
<input type="button" onClick="antImg()" id="button" class="esq"/>
</div>

<div id="controle" class="dir">
<input type="button" onClick="proxImg()" id="button" class="dir" />
</div>

</div>

Editado Setembro 23, 2008 por neo_soro

[KaKarotto]

Não há como pegar com javascript o quanto falta para um elemento ser baixado no total. Você só consegue saber se ele já carregou tudo ou não. O que você poderia fazer é botar uma imagem de loading na transição.

Outra idéia que me surgiu é, você poderia baixar sei lá, 6 imagens grandes. A princípio demoraria um tempinho, mas quando você passasse para a próxima imagem, o script já baixaria outra. Poderia fazer o script baixar sem parar as imagens e apenas escondê-las, fazendo aparecer apenas na transição de uma para a outra.

[neo_soro]

Não há como pegar com javascript o quanto falta para um elemento ser baixado no total. Você só consegue saber se ele já carregou tudo ou não. O que você poderia fazer é botar uma imagem de loading na transição.

Outra idéia que me surgiu é, você poderia baixar sei lá, 6 imagens grandes. A princípio demoraria um tempinho, mas quando você passasse para a próxima imagem, o script já baixaria outra. Poderia fazer o script baixar sem parar as imagens e apenas escondê-las, fazendo aparecer apenas na transição de uma para a outra.

Pow cara pode crê. Uma vez eu vi em Ajax um sistema de upload, onde ia mostrando o progresso do que stá sendo enviando, mas acho que o procedimento é bem diferente do que eu quero, uma vez que você mandaria a foto e não recebendo.

Mas ainda tenho a esperança que haja alguma maneira sem ser em Flash. A idéia que você deu é boa, mas não é bem o que eu quero, porque o cliente não quer que seja assim com uma imagem (se bem que posso tentar convencê-lo disso).

Agora me veio uma idéia. Teria como eu pegar todas as imagens e carregá-las todas de uma vez só e ir apararecendo o progresso através de % 1/100, 2/100, etc. Sem imagem, com texto mesmo?

Agradeço a atenção aí, bom dia.

Rodrigo César