1

O Script abaixo, se encarrega de mostrar uma sequência de imagens em uma determinada taxa de quantidade (num), desta forma se faz necessário definir um número de imagens. Confira:

Código

<html>
  <body>
    <script>

     var dir = 'imagens' // Pasta Minhas imagens

      var num = '5' // Limite a mostrar

      window.onload = function(){

      for (var i = 1; i <= num; i++) {

      document.body.innerHTML += "<img src='"+dir+"/"+i+".jpg'>";

        }
    }

    </script>
   </body>
</html>

Esta rotina(bloco de código) possui dois parâmetros, o primeiro é o dir(diretório) definido na marcação que será responsável por armazenar as imagens.

Já o segundo parâmetro é referente as opções de exibição, esse parâmetro é um num(número) que possui a quantidade máxima a mostrar na página


Não quero ficar setando um número limite, desejo que o próprio script se encarrega de trazer até a última imagem da pasta

NOTA - Todas imagens dentro do respectivo diretório/pasta deverá seguir o mesmo conceito, sendo todas deverão ser nomeados por número ordinais, Exemplo: 1.jpg 2.jpg 3.jpg 4.jpg 5.jpg etc... Somente assim conseguirá mostra-las com sucesso.

3
  • 2
    Javascript só no front não é capaz de acessar diretamente o disco. Está usando node.js, php? Porquê o código que postou não faz o que diz que faz.
    – BrTkCa
    Commented 21/01/2017 às 14:21
  • 1
    A contagem de arquivos (para saber o total) tem que ser com uma linguagem server-side. PHP, por exemplo. Mas se for usar php pra contar, pode usar pra exibir também. Não vejo outra solução. Commented 21/01/2017 às 14:54
  • @DiegoHenrique o que importa da resposta linkada nao é o 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.
    – MoshMage
    Commented 21/01/2017 às 15:00

2 Respostas 2

3

Depois de pensar... (teoricamente) Há uma maneira de fazeres isto client-side. Não é, de todo, aconselhável.

window.loadPatternImages = function() {

  var _this = this;
  this.fileTemplate = "%.jpg";
  this.fileDirectory = "/images/";
  this.imageIndex = 0;

  this.loadImage = function loadImage(src, index) {
    var image = new Image();
    image.src = src.replace('%', index);
    image.onload = function() {
      _this.imageIndex++;
      _this.loadImage(_this.fileDirectory + _this.fileTemplate, _this.imageIndex);
      //document.querySelector('.loaded-images').appendChild(image);
    };
    image.onerror = function(e) {
        var textNode = document.createTextNode('Loaded ' + _this.imageIndex + ' images from ' + src);
      //document.querySelector('.loaded-images').appendChild(textNode);
      _this.errorOccurred(e)
    };
  };

  this.errorOccurred = function(error) {
    console.log(error);
  };

  this.loadImage(_this.fileDirectory + _this.fileTemplate, _this.imageIndex);

};

O que tens que fazer é criar uma uma self-recurring-function que se chama a si mesmo com o intuito de fazer uma nova imagem no DOM e por-lhe um src. Quando essa imagem fizer load, então faz load à proxima. Se essa imagem nao existir, ela retorna um erro pondo então um fim à recursividade.

Podes depois usar image para fazer append no DOM. FiddleJs

No entanto, é bem mais facil meteres um servidor a dizer-te quais as imagens que tens que fazer load.

0

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">&nbsp;</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.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .