0

htmlファイルにロードされているjQueryプリローダーがあります。

<script type="text/javascript">
        jQuery.noConflict()(function($){
            $(".view").preloader();
            $(".flexslider").preloader();
            });
</script>

私のjquery.preloader.js

// JavaScript Document
$.fn.preloader = function(options){

    var defaults = {
                     delay:200,
                     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 : '/assets/images/front/spinner.gif'

        }).hide().appendTo("body");



    timer = setInterval(function(){

        if(icon[0].complete==true)
        {
            clearInterval(timer);
            init();
             icon.remove();
            return;
        }

        },100);

    }

しかし、これを実行すると、「$ is undefined」が表示され、次の行を指します。

var options = $.extend(defaults, options),

しかし、ここに奇妙なことがあります-htmlファイルにjQuery 1.7.2を2回ロードすると、エラーはなくなり、すべてが期待どおりに機能します（プリローダーを含む）。

質問：これを修正するにはどうすればよいので、これを機能させるためにjQueryを2回ロードする必要はありませんか？

4

3 に答える 3

2

preloader.jsはreadyブロックにある必要があります。

(function($) {
    $.fn.preloader = function(options) {
        // your code here.
    }
})(jQuery);
于 2012-05-26T14:41:58.260 に答える
2

命令を実行しているためnoConflict、jQuery$は元の値に再バインドされます（通常はundefined）。を削除し.noConflict()ます。または、 （競合なしモード以外では、）、など$.extendに書き換えます。jQuery.extend$jQuery$(this)jQuery(this)

于 2012-05-26T14:42:21.773 に答える
1

いくつかの問題があります。

  1. DOM内の要素を参照する前に、DOMの準備が整うのを待つ必要があります。document.ready指定したコードがbodyタグの最後にない場合は、コードをブロックに入れる必要があります。

  2. を使用すると、を参照するためにjQuery.noConflict()使用できなくなります。代わりに記号を使用する必要があります。$jQueryjQuery

  3. 再度使用する場合は、自己実行関数ブロックに$渡すことができます。この関数ブロックは、関数ブロック内のシンボルにjQuery割り当てjQueryられ、そこで使用できますが、他のコードに干渉することはありません。$

これは私が提案するものです：

<script type="text/javascript">
    jQuery.noConflict();
    (function($){
        // you can now use $ here as a reference to jQuery 
        // again inside this function
        $(document).ready(function() {
            $(".view").preloader();
            $(".flexslider").preloader();
        });
    })(jQuery);
</script>
于 2012-05-26T15:42:56.287 に答える