1

我正在使用预加载器在加载实际图像之前显示加载 gif 图像。这在除 mozilla firefox 之外的所有浏览器中都能正常工作。在 Mozilla Firefox 中，实际图像首先加载并停留一秒钟，然后显示预加载器图像，然后再次显示实际图像。我只有在将它集成到 Ruby On Rails 时才会遇到这个问题。任何帮助或指导将不胜感激。请帮我。

下面是我用于预加载器的 jquery 代码：

$.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();
    });
4

0 回答 0