在jquery中更改预加载的图像

时间:2015-05-08 15:45:45

标签: jquery click preloader

我正试图通过点击更改图像。图像应该预先加载,但我甚至无法判断它们是否正在预加载。 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>

1 个答案:

答案 0 :(得分:0)

你所拥有的东西有些不对劲。首先,您不能为带有正文的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>