jQuery: Why does my .error() not work?

The jQuery code in question:

<script type="text/javascript">
  
  //Global Variables Here
  var picture = new Image();

  //Functions Here
  function startPicturePuzzle(picturePath) {
    $("#picturePuzzle").css("position", "relative");

    //Load Picture
    $(picture).load(function() {
        getPicturePuzzleDifficulty();
      }).error(function() {
        //Notify user if error occurs
        $("#picturePuzzle").html("<h1>Picture Puzzle:<br />Unable to load image</h1>")
          .find("h1").each(function() {
            $(this).css("position", "absolute");
            $(this).css("left", Math.floor(($("#picturePuzzle").width() - $(this).width()) / 2) + "px");
            $(this).css("top", Math.floor(($("#picturePuzzle").height() - $(this).height()) / 2) + "px");
          })
      })
      .attr("src", picturePath);

  }

  //Document Function Here
  $(document).ready(function() {

    startPicturePuzzle("Park.jpg");

  });
</script>

My question is; Why does my .error() function not work when I run this jQuery code? When run it should display a message inside a div tag I have created in HTML however, it doesn't run at all.

When I remove everything in the function besides:

$("#picturePuzzle").html("<h1>Picture Puzzle:<br />Unable to load image</h1>")
                   .find("h1").each(function() {
                $(this).css("position", "absolute");
                $(this).css("left", Math.floor(($("#picturePuzzle").width() - $(this).width()) / 2) + "px");
                $(this).css("top", Math.floor(($("#picturePuzzle").height() - $(this).height()) / 2) + "px");
              })
          })

the jQuery code will run fine and display the message within my div tag.

Where is the problem? Is it with the .load() and .error() code?