MoshMage disse - "Há uma maneira de fazeres isto client-side. O que tens que fazer é criar uma "self-recurring-function" que se chama a si mesmo"
Numa tradução livre self-recurring-function, quer dizer - função recursiva
Pois bem, em JavaScript existem duas funções temporizadoras embutidas (built-in timer functions), setTimeout
e setInterval
que podem ser usadas para chamar funções de retorno (callback functions) após um determinado tempo. Veja um exemplo de uso disso:
setTimeout(function recursiva() {
document.body.innerHTML += ".";
setTimeout(recursiva, 1000);
}, 1000);
jsbin - Demonstração em funcionamento
Como você pode ver este código acima, chama a função recursiva
que, quando processada, faz uma chamada para setTimeout(recursiva,1000);
que chama recursiva
de novo após 1 segundo, tendo assim quase o mesmo efeito de setInterval
enquanto permanece mais resistente à erros não intencionais que podem ocorrer.
MoshMage ressaltou - "Podes depois usar image para fazer append no DOM"
Então eu decidi fazê-lo assim:
var numero = 0;
numero++;
var figura = document.createElement('img');
figura.src = "/images/'+numero+'.jpg";
document.body.appendChild(figura);
Agora em uma estrutura pré-montada em auto-recorrente-função
ficaria deste modo:
var numero = 0;
numero++;
setTimeout(function recursiva() {
var figura = document.createElement('img');
figura.src = "/images/'+numero+'.jpg";
document.body.appendChild(figura);
setTimeout(recursiva, 1000);
}, 1000);
Mas, de acordo com setInterval()
é a melhor maneira nesse caso. Enquanto a setInterval()
chama a função “infinitamente” sempre no mesmo intervalo de tempo.
E para pausar a função usa-se clearInterval()
. Passando como parâmetro o nome do seu intervalo.
var intervalo = window.setInterval(function() {
document.body.innerHTML += ".";
}, 50);
window.setTimeout(function() {
clearInterval(intervalo);
}, 3000);
jsbin - Exemplo do evento clearInterval em funcionamento
MoshMage finalizou dizendo - "Se essa imagem não existir, ela retorna um erro pondo então um fim à recursividade."
Ótimo, ele quis demonstrar algo pelo método OnError
, tipo assim:
figura = document.createElement('img');
figura.onload = function() {
document.body.appendChild(figura);
}
figura.onerror = function() {
//display error
alert('Erro Fatal!')
}
figura.src = 'http://www.monkie.com.br/logo.png';
// Para prever tal comportamento na prática onError,
// altere a url de destino retirando "logo.png"
// deixando-o http://www.monkie.com.br/ e teste novamente.
jsbin - Exemplo do evento OnError em funcionamento
Contudo isso podemos ver em execução o resultado final, confira:
const figura = document.createElement('img');
var diretorio = 'http://mplayer.xpg.uol.com.br/img/'
var numero = 0;
var intervalo = window.setInterval(visualizar, 1000)
function visualizar() {
figura.src = diretorio+numero+'.jpg'
document.getElementById("foto").appendChild(figura);
numero++;
}
figura.onerror = function()
{
clearInterval(intervalo);
alert('Há '+numero+' fotos em '+diretorio);
}
<span id="foto"> </span>
Explicação snippet
Detalhe, se souber que o valor da variável figura
não vai mudar, utiliza-se a declaração reservada const.
Não é possível chamar uma função anônima se ela não for atribuída a uma variável. No caso a função anônima esta atribuída a variável figura
precedida de ponto "." seguida do método onerror
, tornando-se acessível apenas quando esta variável é acessível, se a imagem não existir, o browser interpretar um erro de carregamento(load) de uma imagem, disparado pelo método OnError. Esta função anônima usa-se clearInterval()
que por sua vez é exatamente a de permitir passá-la como parâmetro o nome do seu intervalo, matando assim o processo contínuo(recursivo) da função visualizar()
. Logo é disparado o evento alert()
que exibi o total de Imagens carregada com sucesso, ou seja, a quantidade exata do que ha no diretório.
LEMBRETE - "Todas imagens devem estar nomeados em numerais ordinais, caso contrário impossível."
Enfim, coube-me esclarecer na prática a teoria dada para cada parágrafo dito por MoshMage.
limite
mas sim a "impossibilidade" de fazer o que queres com garantia de sucesso. Embora a resposta que eu dei possa funcionar - não é, de todo, a melhor maneira de resolver o problema presente.