jQuery - Загрузка случайных изображений из каталога

Question

jQuery noob здесь, поэтому извинения за вопрос!

Я пишу статический сайт для клиента, и они дали мне довольно интересный вызов. Я не уверен, как подойти.

Они хотели бы иметь кнопку на странице, которая извлекает случайные изображения из каталога и помещает их в сетку. Я отлично знаком с HTML и стилем, я просто не знаю, с чего начать jQuery.

Это в основном демонстрация того, что я хотел бы реализовать, предполагая, что кнопка нажата каждую секунду или около того.

ли это возможно и/или возможно только с помощью JQuery (т.е., имеющий его в качестве статического сайта)?

Ответы, сопровождаемые пояснениями, очень ценятся, поскольку я все еще учащийся в веб-дизайне!

Спасибо!

Answer 1

Try используя $.map(), .remove(), setTimeout, .appendTo(), .on()

var updateImages = function updateImages() { 
// remove all images from `#container` element having images as child nodes 
$("#container img").remove(); 
// append eight "random" images to `#container` 
$.map($.makeArray(Array(8)), function(val, key) { 
    setTimeout(function() { 
    $("<img />", 
     // image files named "image-0.jpg" - "image-7.jpg" , 
     // `key` : `0` - `7` 
     {"src": "/path/to/images/image-" + key + ".jpg"}) 
    .appendTo("#container"); 
    }, 1 + Math.floor(Math.random() * 25)) 
});  
}; 
// call `updateImages` 
$("button").on("click", updateImages); 
// set reference to `interval` 
// var interval = 0; 
// call `updateImages` every `1000` ms 
// interval = setInterval(function() { 
// updateImages() 
// }, 1000); 

Answer 2

Так если у вас есть контроль над именами файлов изображений, я бы назвал их как пример, вы упомянули, image.png. Ваш JS будет выглядеть следующим образом (я использовал таблицу для укладки):

$(function(){ 
    loadRandom(); 
    $('#clickMe').on('click',function(){ 
     loadRandom(); 
    }); 
}); 
function loadRandom(){ 
    var ranNums=[]; 
    while(ranNums.length<8){ 
     var t=Math.floor((Math.random()*12)+1); 
     if(ranNums.indexOf(t)==-1) 
      ranNums.push(t); 
    } 
    var i=0; 
    $('#imageTable > tbody > tr > td > img').each(function(){ 
     $(this).attr('src','image'+ranNums[i]+'.png'); 
     i++; 
    }); 
} 

И в HTML, снова используя таблицу для укладки, будет выглядеть

<input type='button' id='clickMe' value='Click Me' /> 
<table id='imageTable'> 
<tr> 
    <td><img src=''></td> 
    <td><img src=''></td> 
    <td><img src=''></td> 
    <td><img src=''></td> 
</tr> 
<tr> 
    <td><img src=''></td> 
    <td><img src=''></td> 
    <td><img src=''></td> 
    <td><img src=''></td> 
</tr> 
</table>