Manipular total de imagens de um diretório sem precisar acessar server-side

Front-end JavaScript
#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.

#Código

<html>

<body>
     <script>
        var dir = 'http://mplayer.xpg.uol.com.br/img/'; // Pasta Minhas imagens

        var num = '5' // Limite a mostrar

        window.onload = function() {

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

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

            }
    alert('Há '+num+' fotos em '+dir);
        }
    </script>
</body>

</html>

Neste Script 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

w3schools - demonstração ao vivo

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

IMPORTANTE!

Todas imagens dentro do diretório devem estar nomeados por número ordinais.

Exemplo:

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

etc…

#3

Há uma maneira de fazer isto client-side. Veja:

#Código

<html>

<body>
    <script>
        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.body.appendChild(figura);
            numero++;
        }

           figura.onerror = function() {
           clearInterval(intervalo);
           alert('Há ' + numero + ' fotos em ' + diretorio);
        }
    </script>
</body>

</html>

#Explicação


1 - Como não sabemos a quantidade das imagens dentro do diretório, usamos a declaração reservada const.

2 - O que temos que fazer é criar uma “função recursiva” que se chama a si mesmo.

3 - E inserir nesta função recursiva, o createElement() para fazer appendChild() no DOM.

4 - Se essa imagem não existir, ela retorna um erro pelo método onError(), dando fim à recursividade.

5 - E para pausar usa-se clearInterval(). Passando como parâmetro o nome do seu “intervalo”.

6 - Logo é disparado o evento alert() que exibi a quantidade exata de imagens.


LEMBRETE - “Todas imagens devem estar nomeados em numerais ordinais, caso contrário impossível”.

w3schools - Confira em perfeito funcionamento!