SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Am I Trying to include too many external JavaScript files?

    Here is what I am trying to do:

    Code:
    //jQuery framework
    <script src="assets/js/jquery-1.2.6.js" type="text/javascript"></script>
    
    //three scripts for the lightbox I am using
    <script type="text/javascript" src="assets/js/prototype.js"></script>
    <script type="text/javascript" src="assets/js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="assets/js/lightbox.js"></script>
    
    //menu effect script calls
    <script src="assets/js/jquery.lavalamp.js" type="text/javascript"></script>
    <script src="assets/js/jquery.easing.min.js" type="text/javascript"></script>
    The first is obviously for the jQuery base framework.

    The next three are for a lightbox I am using on a photo gallery.

    The last two are for a menu effect I am using.

    The problem is that I can get either the lightbox feature working or the menu, but not both at the same time. If I comment out the first three script tags, the menu you will work, and if I only comment out the last two script tags, then the lightbox will work.

    I am not a JavaScript guru by any stretch, so is there something I am missing about how many external scripts I can include in the head section of a page? Is there a more elegant way to include them? I am kinda at a loss here.

    Thanks in advance for any assistance or ideas.

    Regards,
    Zach

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Both jQuery and Prototype use $ as an alias for their global namespace.

    The good news is that you can run the following command so that you can access jQuery in a non-conflicting manner

    Code javascript:
    jQuery.noConflict();

    So now instead of using $('foo') for jQuery, you can use jQuery('foo') instead.

    It does mean changing all jQuery code to use jQuery instead of $, but that's a small price for cross-compatibility.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks pmw57 I will give that a shot!

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That being said, it's generally a bad idea to have multiple JavaScript script files anyway since each one requires a separate HTTP request which can signficantly slow down page loading.

    In other words, think about how many times you've heard someone say "But I have broadband!!! Why isn't the Internet faster???" -- that's one of the reasons why.

  5. #5
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using prototype, scriptaculous, and lightbox for one functionality is just overkill, like crushing an ant with a damn tank. Ditch those three for Thickbox or jqModal.
    Cross browser css bugs

    Dan Schulz you will be missed

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Two additional suggestions for speeding things up.

    1. Google make a multi library include with most of those libraries built into it available from their site. If you use their version then if your visitors have previously visited any other sites that also use that copy of the libraries then they will already have that cached and the download of the page will be much faster.

    2. If you just include one small piece of JavaScript directly into the web page and have that JavaScript dynamically add the additional script tags to the page then those additional JavaScript files will be requested from JavaScript instead of from the HTML and will therefore not be subject to the file download limit of single threading JavaScript file downloads. Instead of the JavaScripts downloading one at a time and the rest of the page waiting until they have all downloaded, the rest of the content will be able to download two or eight files at a time (depending on the browser) with the JavaScript files all downloading at the same time in the background and not being included in that file limit since they were not requested from the HTML.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •