JQuery 5 Random Images

Question

I've been working on a small project as of late and I'm making a list of items which users can select and purchase, right now the code that I put together displays almost every item from the folder and that lags my browser, therefore I want to make it generate only 5 random images. This is my code:

        var items_folder = "images/items/";
        $.ajax({
            url : items_folder,
            success: function (data) {
                $(data).find("a").attr("href", function (i, val) {
                    if (val.match(/\.(jpe?g|png)$/)) { 
                        $('<li><img src="' + items_folder + val + '" height="80px" width="90px"/></li>').appendTo('#items'); 
                    } 
                });
            }
        });

How would I go about doing this?

Answer 1

You can select five random hrefs with this

var randomHrefs = $(data).find("a").get().sort(function() {
    return Math.round(Math.random()) - 0.5
}).slice(0, 5);

and then iterate through them (in order to display them) with

$(randomHrefs).attr("href", function(i, val) {
    //put your logic here, as in your code
}

this question/answers helped me a lot. Check my simple demo also, it may help.