Question

$(window).load(function() {

        // Preload images
        var images = [
                     'image0.png',
                 'image1.png',
                 'image2.png',
                 'image3.png'
              ],
              i,
              img;
        for (i = 0; i < images.length; i++) {
            img = new Image();
        img .src = images[i];
        }
});

我已尝试$(window).ready(function() { ...

同样。

我可以说它没有加载，因为当我切换图像时，我看到白色闪光（加载图像时没有图像）。我错过了什么？

Answer 1

将$(window).load()替换为$(document).ready() 并附加图像或将它们保存到循环中的数组中。

实施例

$(document).ready(function() {
        // Preload images
        var images = [
                  'image0.png',
                 'image1.png',
                 'image2.png',
                 'image3.png'
              ],
              i,
              img;
        for (i = 0; i < images.length; i++) {
            img = new Image();
            img.src = images[i];
            img.alt=images[i];
            $(".contain").append(img);
        }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">


</div>

Answer 2

您忘记附加img（？）。

其他一切正常。

$(window).load(function() {
  // Preload images
  var images = [
                'http://placehold.it/500x100?text=image0.png',
                'http://placehold.it/500x100?text=image1.png',
                'http://placehold.it/500x100?text=image2.png',
                'http://placehold.it/500x100?text=image3.png'
               ],
               i,
               img;
  for (i = 0; i < images.length; i++) {
    img = new Image();
    img.src = images[i];
    $("body").append(img);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

为什么这个javascript / jquery图像预加载器不工作？

2 个答案: