Question

我有一个加载在我的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 TWICE - 错误消失了，一切都按预期工作（包括预加载器）。

问题：我该如何解决这个问题，所以我不需要加载jQuery两次才能使其工作？

Answer 1

preloader.js应该处于就绪状态。

(function($) {
    $.fn.preloader = function(options) {
        // your code here.
    }
})(jQuery);

Answer 2

您正在执行noConflict指令，这使得jQuery将$重新绑定到其原始值（通常为undefined）。删除.noConflict()。或者，将$.extend重写为jQuery.extend（在非冲突模式之外，$只是jQuery）的简写同义词，$(this)转换为jQuery(this)等等。

Answer 3

您有几个问题：

在引用DOM之前，您必须等待DOM准备就绪。如果您提供的代码不在body标记的末尾，那么您需要将代码放在document.ready块中。
使用jQuery.noConflict()时，您无法再使用$来引用jQuery。您必须改为使用符号jQuery。
如果您想再次使用$，可以将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>

$未定义，但加载jQuery两次修复它

3 个答案: