MoshMage said - "There is a way to do this client-side. What you have to do is create a self-recurring-function" / em>
In a free translation self-recurring-function , that is - recursive function
Well, in JavaScript there are two built-in timer functions, setTimeout and setInterval
which can be used to call callback functions after a certain time. Here's an example of using this:
setTimeout(function recursiva() {
document.body.innerHTML += ".";
setTimeout(recursiva, 1000);
}, 1000);
jsbin - Running Demo
As you can see this code above, it calls the recursiva function which, when processed, makes a call to setTimeout(recursiva,1000); that calls recursiva again after 1 second, thus having almost the same effect as setInterval while remaining more resistant to unintentional errors that may occur.
MoshMage highlighted - "You can then use image to append in the DOM"
So I decided to do it like this:
var numero = 0;
numero++;
var figura = document.createElement('img');
figura.src = "/images/'+numero+'.jpg";
document.body.appendChild(figura);
Now in a pre-mounted structure in auto-recorrente-função it would look like this:
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);
But according to setInterval() is the best way in this case. While setInterval() calls the function "infinitely" always in the same time interval.
And to pause the function, use clearInterval() . Passing the name of your range as a parameter.
var intervalo = window.setInterval(function() {
document.body.innerHTML += ".";
}, 50);
window.setTimeout(function() {
clearInterval(intervalo);
}, 3000);
jsbin - Sample clearInterval event running
If this image does not exist, it returns an error then ending the recursion.
MoshMage
Great, he wanted to demonstrate something by the OnError method, like this:
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 - Example of OnError event running
However this can be seen running the final result, check out:
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>
Explanation snippet
Detail, if you know that the value of the figura variable will not change, the reserved statement const .
You can not call an anonymous function if it is not assigned to a variable. In case the anonymous function is assigned the variable figura preceded by "." followed by the onerror method, becoming accessible only when this variable is accessible, if the image does not exist, the browser interprets an error loading an image, triggered by the OnError method. This anonymous function uses clearInterval() which in turn is exactly that of allowing it to be passed as a parameter the name of its range, thus killing the continuous (recursive) process of the visualizar() function. Soon the event alert() is displayed, displaying the total of images loaded successfully, ie the exact amount of what is in the directory.
REMINDER - "All images must be named in ordinal numerals, otherwise impossible."
Finally, it was up to me to clarify in practice the theory given for each paragraph said by MoshMage.
