1

Hope you will not laugh but I want to know if I can do this:

I have a normal js file which has several functions and looks like this: (I have listed just one function to keep the code short)

function traffic(){
    var ANCHOR = $("ul.trf").data('anchor'); 
    var i = 0;
    $('ul.trf li a').each(function() { 
        var $this = $(this); 
        if ($this.text() === ANCHOR) { 
            i++;
            if(i < 10){
                $this.html(''+ANCHOR+' 0'+i+''); 
            }
            else{
                $this.html(''+ANCHOR+' '+i+'');
            }
        } 
    }); 
}

jQuery(document).ready(function($){      
    noborder(); // Removes The Last li Border
    menu_border(); // Ads Borders to Menu on index.php
    gallery();
    traffic();
});  

I also have a second jquery file with the lazyload plugin code:

(this is the minimal version)

(function(a,b){var c=a(b);a.fn.lazyload=function(d){function h(){var b=0;e.each(function(){var c=a(this);if(g.skip_invisible&&!c.is(":visible"))return;if(!a.abovethetop(this,g)&&!a.leftofbegin(this,g))if(!a.belowthefold(this,g)&&!a.rightoffold(this,g))c.trigger("appear");else if(++b>g.failure_limit)return!1})}var e=this,f,g={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null};return d&&(undefined!==d.failurelimit&&(d.failure_limit=d.failurelimit,delete d.failurelimit),undefined!==d.effectspeed&&(d.effect_speed=d.effectspeed,delete d.effectspeed),a.extend(g,d)),f=g.container===undefined||g.container===b?c:a(g.container),0===g.event.indexOf("scroll")&&f.bind(g.event,function(a){return h()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,c.one("appear",function(){if(!this.loaded){if(g.appear){var d=e.length;g.appear.call(b,d,g)}a("<img />").bind("load",function(){c.hide().attr("src",c.data(g.data_attribute))[g.effect](g.effect_speed),b.loaded=!0;var d=a.grep(e,function(a){return!a.loaded});e=a(d);if(g.load){var f=e.length;g.load.call(b,f,g)}}).attr("src",c.data(g.data_attribute))}}),0!==g.event.indexOf("scroll")&&c.bind(g.event,function(a){b.loaded||c.trigger("appear")})}),c.bind("resize",function(a){h()}),h(),this},a.belowthefold=function(d,e){var f;return e.container===undefined||e.container===b?f=c.height()+c.scrollTop():f=a(e.container).offset().top+a(e.container).height(),f<=a(d).offset().top-e.threshold},a.rightoffold=function(d,e){var f;return e.container===undefined||e.container===b?f=c.width()+c.scrollLeft():f=a(e.container).offset().left+a(e.container).width(),f<=a(d).offset().left-e.threshold},a.abovethetop=function(d,e){var f;return e.container===undefined||e.container===b?f=c.scrollTop():f=a(e.container).offset().top,f>=a(d).offset().top+e.threshold+a(d).height()},a.leftofbegin=function(d,e){var f;return e.container===undefined||e.container===b?f=c.scrollLeft():f=a(e.container).offset().left,f>=a(d).offset().left+e.threshold+a(d).width()},a.inviewport=function(b,c){return!a.rightofscreen(b,c)&&!a.leftofscreen(b,c)&&!a.belowthefold(b,c)&&!a.abovethetop(b,c)},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return!a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})})(jQuery,window)   

Is there a way to merge the two files into one?

I call the lazyload plugin in the footer like this:

$("img.lazy").show();
$(window).bind("load", function() { 
    var timeout = setTimeout(function(){$("img.lazy").lazyload({effect : "fadeIn"})}, 800);
    /*$("img.lazy").show().lazyload({effect : "fadeIn"}); */
    /*$("img.lazy").lazyload({effect : "fadeIn"})*/
}); 

1 Answer 1

1

You should be able to copy the source of one file into the other without any problems.

Just make sure everything is defined before you use it. A good approach is to first include jQuery, then any plugins, then your own code.

It doesn't really matter if they are in the same file or separate files - the only thing that matters is the order.

Sign up to request clarification or add additional context in comments.

2 Comments

Should I paste the plugin code after my functions and my document ready declaration?
No, paste it before your code (but make sure it appears after jQuery itself in your document).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.