有人可以帮我理解如何从random.PHP页面预加载图像,这样它第一次加载它就会褪色.目前它有一个丑陋的体积回声,因为它们没有被预加载,但一旦页面运行一旦它在另一个完全消失之后…
//Loop through the images and print them to the page for (var i=0; i < totalBoxes; i++){ $.ajax({ url: "random.PHP?no=",cache: false,success: function(html) { // following line I originally suggested,but let's make it better... //$('#bg').append(html).fadeIn('slow'); // also note the fine difference between append and appendTo. var $d = $(html).hide().appendTo('#bg').fadeIn('slow'); $('img',$d).hover(function() { var largePath = $(this).attr("rel"); $(this).fadeOut("slow",function() { $(this).attr({ src: largePath }).fadeIn("slow"); }); }); } }); }
解决方法
有一天,我写了一个快速插件,它将获取一系列图像URL并预加载它们,同时让你指定在每个图像加载后和/或所有图像加载完毕后要做什么.
jQuery.extend(jQuery,{
imagesToLoad: 0,loadedImages: [],preloadImages: function(){
var settings = {
urls : [],begin : function(){},each : function(){},complete : function(){},scope: window
};
jQuery.extend(settings,arguments[0]);
var images = [];
jQuery.imagesToLoad = settings.urls.length;
settings.begin.call(settings.scope,settings.urls);
for(var i = 0; i < settings.urls.length; i++){
images[i] = new Image();
images[i].onload = function(){
settings.each.call(settings.scope,this);
jQuery.loadedImages.push(this);
if(jQuery.loadedImages.length >= jQuery.imagesToLoad){
settings.complete.call(settings.scope,jQuery.loadedImages);
}
}
images[i].src= settings.urls[i];
}
}
});
$.preloadImages({
urls: ['path/to/image/1.jpg','path/to/image/2.jpg'],begin: function(urls){
console.log("loading images %o",urls);
},each: function(image){
console.log("finished loading %s",image.src);
},complete: function(images){
// do whatever after all the images are done loading
}
});
