javascript - 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 图像对象

这里函数允许在加载所有图片时触发回调。 但是,注意如果至少有一个资源没有加载,它将不会触发回调。 通过实现 onerror 回调并递增 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,在检查你的解决方案之后,我在 Firefox 中仍然有问题,它不会预先加载图像,然后再加载页面。 我在我的服务器端脚本中加入了一些 sleep(5) 。 我实现了下面的解决方案,它似乎解决了这个问题。

基本上我添加了一个回调到你的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
 });
});

希望这可以帮助来自谷歌( 我做了)的人寻找一个解决方案来在Ajax调用上加载图像。

我有一个小插件来处理这个问题。

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

如果你只是想装入所有图像,包括那些在CSS中引用,这里是你将如何做到这一点:)


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

这个 jquery imageLoader 插件只是 1.39 kb

使用方法:


$({}).imageLoader({
 images: [src1,src2,src3...],
 allcomplete:function(e,ui){
//images are ready here
 $(document).ready(function(){
//your code - site.fadeIn() or something like that
 });
 }
});

还有其他选项,比如是否要同步加载图像或者asychronously以及每个单独图像的完整事件。


$.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/

你可以使用 css display:none; 规则在html中加载图像,然后在使用js或者jquery时显示它们

不要使用js或者jquery函数来预加载只是一个css规则 vs 要执行很多行

示例: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();

在所有,直到你展示that,预载图像通过 jquery/js不好会让图片在页面中,以几个毫秒来装+ 你有毫秒的,然后进行解析并执行的脚本的问题,特别还那么hml中如果它们是隐藏大尺寸的图片,所以他们是更好的性能,导致图像就是预加载的,没有beeing可见 !

感谢这个我应该liek来增加些即兴的回答来 j-p - 我不知道如果这将帮助任何人,但优点在于你不必创建一个图像数组,正确,并且你可以预加载所有你们的大图像如果你命名你的拇指。 这很方便,因为我已经有人谁是写在html中,并且能保证所有的网页对他们来说少了一个步骤要做的- 不必每次都创建该图像数组,另一个阶这种测试目的可以得到出错的地方


$("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 。如果匹配某些条件,( 是拇指,还是主页图像) 会改变 name(a basic string replace in the image src),,然后加载图像。

然后用 _lg.jpg 和预加载的所有大型images,在我的情况下,页面布满了拇指图像的所有命名差不多与 image_th.jpg, 和所有相应的大图片均命名 image_lg.jpg. 拇指大只会替换在

希望有助于你。

...