Изменить предварительно загруженные изображения в jquery

Question

Я пытаюсь изменить изображения одним щелчком мыши. Изображения должны быть предварительно загружены, но я даже не могу сказать, загружаются ли они предварительно. Новичок в Jquery, пожалуйста, помогите.

<script src="https://code.jquery.com/jquery-1.10.2.js">
$(document).ready(function() {
 var preloads = [
    'images/01.jpg',
    'images/02.jpg',
    'images/03.jpg',
    'images/04.jpg',
    'images/05.jpg',
 ]; 

 $(preloads).each(function(){
     $('')[0].src=this;
 });
 var i = 0;


});

$("img").click(function() {
    ++i;
    if(i = 17)  {
        i = 0;
    }
    $(this).src = preloads[i];
});
</script>

Answer 1

Есть несколько вещей не так с тем, что у вас есть. Во-первых, вы не можете указать src для <script> тег с телом, потому что тогда он не будет выполнять то, что у вас внутри тега, а только то, что загружено из источника. Во-вторых, измените строку $('')[0].src = this; в $('<img/>').get(0).src = val; и измените объявление функции на function (i, val) { так что вы передаете строку, связанную с каждым индексом массива.

Итак, вот решение:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
  $(document).ready(function() {
    var preloads = [
      'images/01.jpg',
      'images/02.jpg',
      'images/03.jpg',
      'images/04.jpg',
      'images/05.jpg',
    ];

    $(preloads).each(function(i, val) {
      $('<img/>').get(0).src = val;
    });
    var i = 0;

    $("img").click(function() {
      ++i;
      if (i = 17) {
        i = 0;
      }
      $(this).get(0).src = preloads[i];
    });
  });
</script>