passing a variable from my click event to a function

Is there a more efficient way to do this, I mean other than usi开发者_如何学Pythonng a global? I hate to use global variables but I just can't seem to figure out how to pass the href attribute to the function.

$(document).ready(function(){
var src
$('.thumbs li a').click(function(){
     src=$(this).attr('href')
     loadImage();
     return false;  
})

function loadImage(){
 var img = new Image();
 $(img).load(function () {
        //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
        $(this).hide();
        $('.large_img_holder').removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', src );
 }
});

I'm not sure if this is what you're after, but if you allow the loadImage function to take src as a parameter then you can avoid defining the src variable in the ready function:

$(document).ready(function(){
$('.thumbs li a').click(function(){
     var src=$(this).attr('href')
     loadImage(src);
     return false;  
})

function loadImage(src){
 var img = new Image();
 $(img).load(function () {
        //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
        $(this).hide();
        $('.large_img_holder').removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', src );
 }
});

You could simply pass it as a param:

function loadImage(new_src){
  var img = new Image();
  $(img).load(function () {
         //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
         $(this).hide();
         $('.large_img_holder').removeClass('loading').append(this);
         $(this).fadeIn();
     }).error(function () {
         // notify the user that the image could not be loaded
     }).attr('src', new_src );
  });
}

$('.thumbs li a').click(function(){
     loadImage($(this).attr('href'));
     return false;  
})

First of all the src variable is declared inside of $(document).ready(function(){/*...*/}; so it is not global. Moreover you can use parameters of loadImage functions instead of src variable:

$(document).ready(function(){
    var loadImage = function(src){
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none');
            //.hide() doesn't work in Safari when the element isn't on the DOM already
            $(this).hide();
            $('.large_img_holder').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function () {
        // notify the user that the image could not be loaded
        }).attr('src', src );
    };

    $('.thumbs li a').click(function(){
         loadImage($(this).attr('href'));
         return false;  
    });
});