0

我有一个 jQuery 预加载器，它加载到我的 html 文件中：

<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);

    }

但是当我运行它时，我得到一个“$ 未定义”并指向这一行：

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

但奇怪的是——如果我在我的 html 文件中加载 jQuery 1.7.2 TWICE——错误就会消失，一切都按预期工作（包括预加载器）。

问题：我该如何解决这个问题，所以我不需要加载 jQuery 两次来完成这项工作？

4

3 回答 3

2

preloader.js 应该在一个就绪块中。

(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)intojQuery(this)等。

于 2012-05-26T14:42:21.773 回答
1

你有几个问题：

  1. 在引用其中的元素之前，您必须等待 DOM 准备好。如果您提供的代码不在正文标记的末尾，那么您需要将您的代码放在一个document.ready块中。

  2. 当你使用时jQuery.noConflict()，你可以不再使用$来引用jQuery。您必须改为使用符号jQuery。

  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 回答