Question

我在页面中有一个动画，当动画继续播放时我想预先加载图像。

动画就像一个介绍。在动画播放时我想为一些元素加载几个图像和背景图像，然后加载图像然后继续进行回调。

例如，我想加载img元素的图像：

<img src="image1.png">
<img src="image2.png">
<img src="image3.png">

然后在css文件中设置一些图像：

.figure1{background-image:url('fig1.png')}
.figure2{background-image:url('fig2.png')}
.figure3{background-image:url('fig3.png')}

加载所有图像后，然后继续使用其他功能。

我的动画示例：

$('#coolanimation').delay(1000).fadeIn("slow", function() {

    // Load images here and when loaded do this:
    $('#intro').fadeOut("slow", function() { $(this).remove();

    });
});

Answer 1

可能你需要这个 http://www.mattfarina.com/2007/02/01/preloading_images_with_jquery

Answer 2

图片元素有一个onload事件。创建一个数组，其中包含您要预加载的所有图像的URL（包括通过CSS background-image加载的图像），为每个图像实例化DOM Image对象，并跟踪使用计数器加载的图像数量。

<script>
var imageList = [
  'image1.png',
  'image1.png',
  'image1.png',
  'fig1.png',
  'fig2.png',
  'fig3.png'
],
imageCountdown = imageList.length; 

$(function(){

  $('#coolanimation').delay(1000).fadeIn("slow");

  // No need to wait for the fadeIn to complete before loading images. Get the preloading happening in the background as soon as possible. 
  $.each(imageList, function(index, item){
    var image = new Image(); // creates a DOM Image object

    // Create the onload handler before setting image src. Cached images trigger "onload" as soon as image src is set, so we need to be prepared for that. 
    image.onload = function(){
      // Decrement the image countdown        
      imageCountdown--;

      image.onload = function(){}; // clear the onload handler. Avoids certain bugs in IE

      if (imageCountdown === 0){
        // if imageCountdown is 0, we've loaded all the images. So now go ahead and trigger the animation
        $('#intro').fadeOut("slow", 
          function (){ 
            $(this).remove();
          }
        );
      }
    };

    // Now that we're prepared for the onload, set the image src
    image.src = item;
  });
});
</script>

可以在此算法中包含CSS图像，因为一旦加载它们，它们将被缓存在内存中，并可立即用于页面中的任何位置。

Answer 3

如何使用window.load事件？

$(window).on('load', function () {
    //run your code here
});

加载事件在文档加载过程结束时触发。在至此，文档中的所有对象都在DOM中，而且都是图像和子帧已完成加载。

来源：https://developer.mozilla.org/en/DOM/window.onload

更新

据我所知，您无法将事件处理程序绑定到load的{{1}}事件。对于常规的background-image来说，这很容易：

img

Answer 4

我使用Amit的代码作为在用户深入到应用程序之后加载图像的函数的基础，而不是在应用程序开始之前。

用户在我们的应用程序中做出一系列选择，动态确定要加载的一系列图像 - 最多5个400x400px png。 KEY这里 - 我必须确保在激活函数调用之前加载图像。如果未预加载图像，则该功能失败。如果该功能失败，整个应用程序将失败。所以，图像必须在那里。

Amit的代码对于构建我们的功能至关重要。谢谢。我在Safari中添加一个防弹功能的一件事就是将图像插入到DOM中。它没有为我工作，没有这样做。我有一个带有透明图像及其有效src的占位符div。在我的情况下，我知道有多少图像并提前设置它们，但这可以在运行代码插入div之前动态完成。

在html中：

<div id="hideMe">
<img class="theImgs" id="fake1" src="transparent.png"><img id="fake2" src="transparent.png"> etc...
</div>

在javascript中：

image.src = item; // insert after this line, the two lines below.

// insert image into the DOM, into a hidden div
$("#fake" + imageCountdown).attr('src', '' + item + '');

使用回调加载图像

4 个答案:

更新