Javascript 如何避免在使用Ruby On Rails预加载mozilla firefox中的图像之前加载实际图像
在加载实际图像之前,我使用预加载程序显示正在加载的gif图像。这在除mozilla firefox之外的所有浏览器中都能正常工作。在mozilla firefox中,首先加载实际图像并停留一秒钟,然后显示预加载图像,然后再次显示实际图像。我只是在将它集成到RubyonRails中时才面临这个问题。任何帮助或指导都将不胜感激。请帮帮我 下面是我用于预加载程序的jquery代码:Javascript 如何避免在使用Ruby On Rails预加载mozilla firefox中的图像之前加载实际图像,javascript,ruby-on-rails,image,firefox,preloader,Javascript,Ruby On Rails,Image,Firefox,Preloader,在加载实际图像之前,我使用预加载程序显示正在加载的gif图像。这在除mozilla firefox之外的所有浏览器中都能正常工作。在mozilla firefox中,首先加载实际图像并停留一秒钟,然后显示预加载图像,然后再次显示实际图像。我只是在将它集成到RubyonRails中时才面临这个问题。任何帮助或指导都将不胜感激。请帮帮我 下面是我用于预加载程序的jquery代码: $.fn.preloader = function(options){ var defaults = {
$.fn.preloader = function(options){
var defaults = {
delay:20,
preload_parent:"a",
check_timer:300,
ondone:function(){ },
oneachload:function(image){ },
fadein:500
};
// variables declaration and precaching images and parent container
var options = $.extend(defaults, options),
root = $(this) , images = root.find("img").css({"visibility":"hidden",opacity:0}) , timer , counter = 0, i=0 , checkFlag = [] , delaySum = options.delay ,
init = function(){
timer = setInterval(function(){
if(counter>=checkFlag.length)
{
clearInterval(timer);
options.ondone();
return;
}
for(i=0;i<images.length;i++)
{
if(images[i].complete==true)
{
if(checkFlag[i]==false)
{
checkFlag[i] = true;
options.oneachload(images[i]);
counter++;
delaySum = delaySum + options.delay;
}
$(images[i]).css("visibility","visible").delay(delaySum).animate({opacity:1},options.fadein,
function(){ $(this).parent().removeClass("preloader"); });
}
}
},options.check_timer)
} ;
images.each(function(){
if($(this).parent(options.preload_parent).length==0)
$(this).wrap("<a class='preloader' />");
else
$(this).parent().addClass("preloader");
checkFlag[i++] = false;
});
images = $.makeArray(images);
var icon = jQuery("<img />",{
id : 'loadingicon' ,
src : 'css/i/89.gif'
}).hide().appendTo("body");
timer = setInterval(function(){
if(icon[0].complete==true)
{
clearInterval(timer);
init();
icon.remove();
return;
}
},100);
}
$(function(){
$("#gallery").preloader();
});