I want the images not to be repeated, just to change the order randomly

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>

Leave a Reply