需要预载图像功能

Question

现在我正在编写一个代码，用于更改具有不同鼠标位置的图像。 它有效但不顺利。我想要一个简单易用的预加载功能。 This is what it looks like

以下是代码

function HeadImage(className){

    this.className = className;
    this.imageLeft = $("."+this.className+">.head-image").offset().left;
    this.imageRight = this.imageLeft + $("."+this.className+">.head-image").width();
    this.imageTop = $("."+this.className+">.head-image").offset().top;
    this.imageBottom = this.imageTop + $("."+this.className+">.head-image").height();

    this.setImageDirection = function(){
        $("."+this.className+">.head-image").css("z-index","0");
        if(mouseX >= 0 && mouseX <= 10){
            $("."+this.className+">.a").css("z-index","1");
        } else if(mouseX < 20 && mouseX >= 10){
            $("."+this.className+">.b").css("z-index","1");
        } else if(mouseX < 30 && mouseX >= 20){
            $("."+this.className+">.c").css("z-index","1");
        } else if(mouseX < 40 && mouseX >= 30){
            $("."+this.className+">.d").css("z-index","1");
        } else if(mouseX < 50 && mouseX >= 40){
            $("."+this.className+">.e").css("z-index","1");
        } else if(mouseX < 60 && mouseX >= 50){
            $("."+this.className+">.f").css("z-index","1");
        } else if(mouseX < 70 && mouseX >= 60){
            $("."+this.className+">.g").css("z-index","1");
        } else if(mouseX < 80 && mouseX >= 70){
            $("."+this.className+">.h").css("z-index","1");
        } else if(mouseX < 90 && mouseX >= 80){
            $("."+this.className+">.i").css("z-index","1");
        } else if(mouseX < 100 && mouseX >= 90){
            $("."+this.className+">.j").css("z-index","1");
        } else {
            $("."+this.className+">.p").css("z-index","1");
            $(".text-holder").css("display","none");
            $("."+this.className+".text-holder").css("display","block");
        }
    }
}