我正在寻找一个快速和简单的方法,预加载图像与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插件在那里做这个,但他们似乎都有点大(大小);我只需要一个快速,简单和短的方式预加载图像!


当前回答

这一行jQuery代码创建(并加载)一个DOM元素img,但没有显示它:

$('<img src="img/1.jpg"/>');

其他回答

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

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

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

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

这一行jQuery代码创建(并加载)一个DOM元素img,但没有显示它:

$('<img src="img/1.jpg"/>');

我会使用Manifest文件告诉(现代)网络浏览器也加载所有相关图像并缓存它们。使用Grunt和Grunt -manifest自动完成这个任务,再也不用担心预加载脚本、缓存失效器、CDN等问题。

https://github.com/gunta/grunt-manifest

function preload(imgs) {
    $(imgs).each(function(index, value) {
        $('<img />').attr('src', value).appendTo('body').css('display', 'none');
    });
}

.attr(“src”,值) 不 .attr(“src”,这个)

只是指出一点:)

即使在IE9中,这也适用于我:

$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });