1

実際の画像をロードする前に、プリローダーを使用してロード中のgif画像を表示しています。これは、mozilla firefox を除くすべてのブラウザで正しく機能しています。mozilla firefox では、実際の画像が最初にロードされ、1 秒間留まってから、プリローダーの画像が表示され、再び実際の画像が表示されます。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