I have this code from codepen, but when loading the images it repeats them, and what I want to do is keep them appearing randomly, but not repeat them.
HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Random image grid</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
JS:
document.addEventListener('DOMContentLoaded', function() {
for (i=1; i<8; i++){
(function(i){
setTimeout(function () {
$('<img class="sq" src="ads/ads-' + Math.floor((Math.random() * 7)+1) + '.jpg">').appendTo('body');
}, i * 1);
}(i));
};
}, false);
Any idea how I can do it, I’m kind of new to js, I’m just learning
>Solution :
Instead of generating random numbers in each iteration, generate the array of possible numbers (0..7), shuffle them, and then use that shuffled array to produce the images.
Side node: as you use jQuery, use it with its full potential:
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
$(function() {
let nums = shuffle([...Array(8).keys()]);
(function loop() {
if (!nums.length) return;
let i = nums.pop() + 1;
$("<img>", {
class: "sq",
src: `ads/ads-${i}.jpg`,
alt: i
}).appendTo("body");
setTimeout(loop, 100);
})();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>