用jQuery预载图像
我正在寻找一种快速简单的方法来预载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插件，但它们看起来都有点大（大小）。 我只需要一个快速，简单，方便的预加载图像！
快速简单：
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();
这里是第一个响应的调整版本，它实际上将图像加载到DOM中并默认隐藏它。
function preload(arrayOfImages) { $(arrayOfImages).each(function () { $('<img />').attr('src',this).appendTo('body').css('display','none'); }); }
使用JavaScript 图像对象 。
此function可让您在加载所有图片时触发回叫。 但是请注意，如果至less有一个资源未加载，它将永远不会触发callback。 这可以很容易地通过实现onerrorcallback和递增loaded值或处理错误来解决。
var preloadPictures = function(pictureUrls, callback) { var i, j, loaded = 0; for (i = 0, j = pictureUrls.length; i < j; i++) { (function (img, src) { img.onload = function () { if (++loaded == pictureUrls.length && callback) { callback(); } }; // Use the following callback methods to debug // in case of an unexpected behavior. img.onerror = function () {}; img.onabort = function () {}; img.src = src; } (new Image(), pictureUrls[i])); } }; preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){ console.log('a'); }); preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){ console.log('b'); });
JP，在检查你的解决scheme后，我仍然在Firefox中遇到问题，在加载页面之前，它不会预加载图像。 我通过在服务器端脚本中放入一些sleep(5)来发现这一点。 我实施了以下基于您的解决scheme似乎解决这个问题。
基本上我加了一个callback给你的jQuery预载插件，以便在所有的图像正确加载后调用它。
// Helper function, used below. // Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg'); Array.prototype.remove = function(element) { for (var i = 0; i < this.length; i++) { if (this[i] == element) { this.splice(i,1); } } }; // Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... }); // Callback function gets called after all images are preloaded $.fn.preloadImages = function(callback) { checklist = this.toArray(); this.each(function() { $('<img>').attr({ src: this }).load(function() { checklist.remove($(this).attr('src')); if (checklist.length == 0) { callback(); } }); }); };
出于兴趣，在我的情况下，我使用如下：
$.post('/submit_stuff', { id: 123 }, function(response) { $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){ // Update page with response data }); });
希望这可以帮助Google来到这个页面的人（就像我一样）寻找解决scheme来预加载Ajax调用的图像。
这一行jQuery代码创build（并加载）一个DOM元素img而不显示它：
$('<img src="img/1.jpg"/>');
$.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); });
我有一个小插件来处理这个。
它被称为waitForImages ，它可以处理img元素或任何元素的引用到CSS中的图像，例如div { background: url(img.png) } 。
如果你只是想加载所有的图像，包括CSS中引用的图像，这是你将如何做:)
$('body').waitForImages({ waitForAll: true, finished: function() { // All images have loaded. } });
你可以加载图像在你的HTML使用CSS display:none; 规则，然后显示他们，当你想与js或jQuery的
不要使用js或jquery函数来预加载只是一个css规则vs要执行的许多js行
例如：Html
<img src="someimg.png" class="hide" alt=""/>
CSS：
.hide{ display:none; }
jQuery的：
//if want to show img $('.hide').show(); //if want to hide $('.hide').hide();
用jquery / javascript预加载图片并不好，因为在页面中加载图片需要几毫秒的时间，脚本需要毫秒的时间才能被parsing和执行，特别是如果它们是大图片，那么将它们隐藏在hml中也会更好，导致图像真的被预加载，没有beeing可见，直到你表明！
这jQuery的imageLoader插件只是1.39kb
用法：
$({}).imageLoader({ images: [src1,src2,src3...], allcomplete:function(e,ui){ //images are ready here //your code - site.fadeIn() or something like that } });
还有其他选项，比如是否要同步或asynchronous加载图像，以及每个图像的完整事件。
一个快速，无插件的方式来预加载jQuery图像并获得callback函数是一次创build多个img标签并计数响应，例如
function preload(files, cb) { var len = files.length; $(files.map(function(f) { return '<img src="'+f+'" />'; }).join('')).load(function () { if(--len===0) { cb(); } }); } preload(["one.jpg", "two.png", "three.png"], function() { /* Code here is called once all files are loaded. */ });
请注意，如果你想支持IE7，你需要使用这个稍微不太漂亮的版本（这也适用于其他浏览器）：
function preload(files, cb) { var len = files.length; $($.map(files, function(f) { return '<img src="'+f+'" />'; }).join('')).load(function () { if(--len===0) { cb(); } }); }
谢谢你！ 我想在JP的答案上添加一点点即兴 – 我不知道这是否会帮助任何人，但这样你就不必创build一个图像arrays，并且你可以预先加载所有的大图像，如果你正确地命名你的拇指。 这是很方便的，因为我有一个用html编写所有页面的人，并且确保他们做的一个更less的步骤 – 消除了创build图像数组的需要，而另一个步骤可能会搞砸了。
$("img").each(function(){ var imgsrc = $(this).attr('src'); if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){ imgsrc = thumbToLarge(imgsrc); (new Image()).src = imgsrc; } });
基本上，对于页面上的每个图像，它抓取每个图像的src，如果它符合某些标准（是拇指或主页图像），它会更改名称（图像src中的基本stringreplace），然后加载图像。
在我的情况下，页面充满了所有名为image_th.jpg的缩略图，所有对应的大图都被命名为image_lg.jpg。 大拇指只用_lg.jpg代替_th.jpg，然后预先加载所有大图像。
希望这有助于某人。
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*/ } )
我使用下面的代码：
$("#myImage").attr("src","img/spinner.gif"); var img = new Image(); $(img).load(function() { $("#myImage").attr("src",img.src); }); img.src = "http://example.com/imageToPreload.jpg";
我会使用一个Manifest文件告诉（现代）网页浏览器也加载所有相关的图像并caching它们。 使用Grunt和grunt-manifest自动执行此操作，而不必再担心预加载脚本，caching失效程序，CDN等。
即使在IE9中，这也适用于我：
$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });
我想用Google Maps API自定义叠加层来完成此操作。 他们的示例代码只是使用JS插入IMG元素，图像占位符框显示，直到图像加载。 我在这里find了一个适用于我的答案： https : //stackoverflow.com/a/10863680/2095698 。
$('<img src="'+ imgPaht +'">').load(function() { $(this).width(some).height(some).appendTo('#some_target'); });
这会按照以前build议的方式预加载图像，然后在加载img URL之后使用处理程序追加img对象。 jQuery的文档警告说，caching的图像不能很好地处理这个事件/处理程序代码，但是它在FireFox和Chrome中对我来说是工作的，我不必担心IE。
function preload(imgs) { $(imgs).each(function(index, value){ $('<img />').attr('src',value).appendTo('body').css('display','none'); }); }
.attr('src',value)
不
.attr('src',this)
只是为了指出:)
咖啡的5行
array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png'] $(document).ready -> for index, image of array img[index] = new Image() img[index].src = image
对于那些知道一些动作的人来说，你可以用最less的努力检查flash player，并制作一个flash preloader，也可以导出到html5 / Javascript / Jquery。 要使用，如果没有检测到Flash播放器，检查如何做到这一点与YouTube的angular色返回到HTML5播放器的例子:)并创build自己的。 我没有细节，因为我还没有开始，如果我没有忘记，我会稍后发布，并会尝试一些标准的JQuery代码来挖掘。
所有时尚人士都写有自己的版本，所以这是我的。 它将隐藏的div添加到身体并用所需的图像填充它。 我用Coffee Script写的。 这是咖啡，普通的js和压缩的js。
咖啡：
$.fn.preload = () -> domHolder = $( '<div/>' ).hide() $( 'body' ).append domHolder this.each ( i, e) => domHolder.append( $('<img/>').attr('src', e) )
正常：
(function() { $.fn.preload = function() { var domHolder, _this = this; domHolder = $('<div></div>').css('display', 'none'); $('body').append(domHolder); return this.each(function(i, e) { return domHolder.append($('<img/>').attr('src', e)); }); }; }).call(this);
压缩：
function(){$.fn.preload=function(){var a,b=this;return a=$("<div></div>").css("display","none"),$("body").append(a),this.each(function(b,c){return a.append($("<img/>").attr("src",c))})}}.call(this);
