我正在寻找一个快速和简单的方法,预加载图像与JavaScript。如果这很重要,我将使用jQuery。

我在这里看到了这个(http://nettuts.com...):)

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

但是,对于我想要的东西来说,这看起来有点夸张!

我知道有jQuery插件在那里做这个,但他们似乎都有点大(大小);我只需要一个快速,简单和短的方式预加载图像!


当前回答

对于那些知道一点点actionscript的人,你可以检查flash播放器,用最小的努力,并制作一个flash预加载器,你也可以导出到html5/Javascript/Jquery。 如果flash播放器未被检测到,请检查如何将youtube角色返回到html5 player的示例:) 并且创造你自己的。 我没有细节,因为我还没有开始,如果我不忘记,我将张贴它以后,并将尝试一些标准的Jquery代码我。

其他回答

简单快捷:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

或者,如果你想要一个jQuery插件:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();
$.fn.preload = function (callback) {
  var length = this.length;
  var iterator = 0;

  return this.each(function () {
    var self = this;
    var tmp = new Image();

    if (callback) tmp.onload = function () {
      callback.call(self, 100 * ++iterator / length, iterator === length);
    };

    tmp.src = this.src;
  });
};

用法很简单:

$('img').preload(function(perc, done) {
  console.log(this, perc, done);
});

http://jsfiddle.net/yckart/ACbTK/

    jQuery.preloadImage=function(src,onSuccess,onError)
    {
        var img = new Image()
        img.src=src;
        var error=false;
        img.onerror=function(){
            error=true;
            if(onError)onError.call(img);
        }
        if(error==false)    
        setTimeout(function(){
            if(img.height>0&&img.width>0){ 
                if(onSuccess)onSuccess.call(img);
                return img;
            }   else {
                setTimeout(arguments.callee,5);
            }   
        },0);
        return img; 
    }

    jQuery.preloadImages=function(arrayOfImages){
        jQuery.each(arrayOfImages,function(){
            jQuery.preloadImage(this);
        })
    }
 // example   
    jQuery.preloadImage(
        'img/someimage.jpg',
        function(){
            /*complete
            this.width!=0 == true
            */
        },
        function(){
            /*error*/
        }
    )

我有一个小插件处理这个。

它被称为waitForImages,它可以处理img元素或CSS中任何引用图像的元素,例如div {background: url(img.png)}。

如果你只是想加载所有的图像,包括在CSS中引用的图像,这里是你如何做的:)

$('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

对于那些知道一点点actionscript的人,你可以检查flash播放器,用最小的努力,并制作一个flash预加载器,你也可以导出到html5/Javascript/Jquery。 如果flash播放器未被检测到,请检查如何将youtube角色返回到html5 player的示例:) 并且创造你自己的。 我没有细节,因为我还没有开始,如果我不忘记,我将张贴它以后,并将尝试一些标准的Jquery代码我。