www.webdeveloper.com
Results 1 to 4 of 4

Thread: Script is working but would like to optimizing for speed

  1. #1
    Join Date
    May 2012
    Posts
    82

    Script is working but would like to optimizing for speed

    The script below does achieve the task of changing image src with corresponding page content #ID however, I would like to optimize the script to increase functionality and loading speeding. Can any javascript / jQuery developer(s) suggest alternative script(s) with explanation?

    Code:
     
    $('#about').waypoint(function(event, direction){
        if (direction ==='down'){
    
        $('#myLogo').attr('src','./images/logo3.png');
        }else{
            direction ==='up';
         $('#myLogo').attr('src','./images/logo2.png');
        }
    });
    
    $('#portfolio').waypoint(function(event, direction){
        if (direction === 'down'){
    
        $('#myLogo').attr('src','./images/logo4.png');
        }else{
            direction === 'up';
        $('#myLogo').attr('src','./images/logo3.png');
        }
    });
    
     $('#skills').waypoint(function(event, direction){
        if (direction === 'down'){
    
        $('#myLogo').attr('src','./images/logo5.png');
        }else{
            direction === 'up';
        $('#myLogo').attr('src','./images/logo4.png');
        }
    });
    
    $('#myclients').waypoint(function(event, direction){
        if (direction === 'down'){
    
        $('#myLogo').attr('src','./images/logo6.png');
        }else{
            direction === 'up';
        $('#myLogo').attr('src','./images/logo5.png');
        }
    });
        $('#contact').waypoint(function(event, direction){
        if (direction === 'down'){
    
        $('#myLogo').attr('src','./images/logo7.png');
        }else{
            direction === 'up';
        $('#myLogo').attr('src','./images/logo6.png');
        }
    });

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    First its seems your selectors #about, #portfolio maybe siblings in someway judging by how they all use the waypoint.
    You could just use the $(parent child) selector (need to see your HTML) you can then just use a switch($(this).attr('id')) to match each case

    $(parent child).waypoint(function(event, direction){
    var url='';
    switch($(this).attr('id')):
    case 'about':
    url=(direction=='down')?'./images/logo3.png':'./images/logo2.png';
    break;
    case 'portfolio':
    url=(direction=='down')?'./images/logo4.png':'./images/logo3.png';
    break;
    .....
    .....

    $('#myLogo').attr('src', url);
    end;

    });


    The $(parent child) is defined by your HTML structure and should be specific enough so it only get childNodes with the IDs shown in your original post.
    Last edited by holyhttp; 09-03-2012 at 09:08 PM.

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  4. #4
    Join Date
    May 2012
    Posts
    82
    Thanks HollyHTTP and Toicontien for you help. I will give your solutions a try. :-)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles