Script is working but would like to optimizing for speed

[Jerrell_B]

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?

 
$('#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');
    }
});

[holyhttp]

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.

[toicontien]

Since you are referencing HTML tag Ids, you could wrap each call to jQuery with:

if (document.getElementById("my_id")) {
  $("#my_id").waypoint( ... );
}

[Jerrell_B]

Thanks HollyHTTP and Toicontien for you help. I will give your solutions a try. :-)