Last der Hover-Bilder aus dem Anfang js

Question

Ich mache diesen Code js mich zu erlauben, die Bilder zu ändern, wenn ich schwebe .. aber die Hover-Bilder mit dem anderen Bild nicht

<script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      $('.img-grey').on({ 
 
      mouseenter: function (e) { 
 
       var greysrc = $(this).attr('src'); 
 
       var colorsrc = greysrc.replace("1.jpg", "2.jpg") 
 
       $(this).attr('src', colorsrc); 
 
      }, 
 
      mouseleave: function (e) { 
 
       var colorsrc = $(this).attr('src'); 
 
       var greysrc = colorsrc.replace("2.jpg", "1.jpg") 
 
       $(this).attr('src', greysrc); 
 
      } 
 
      }) 
 
     }); 
 
    </script>

zur gleichen Zeit laden

Answer 1

Alternativ kann diese Aufgabe mit CSS gelöst werden. Überprüfen Sie die CSS Attributselektoren https://www.w3schools.com/css/css_attribute_selectors.asp

Alles, was Sie brauchen, ist neben HTML-Struktur zu erstellen:

<div class="container"> 
    <img src="1path-to-1.jpg" /> 
    <img src="1path-to-2.jpg" /> 
</div> 
<div class="container"> 
    <img src="2path-to-1.jpg" /> 
    <img src="2path-to-2.jpg" /> 
</div> 

Siehe beigefügte Schnipsel

.container [src$="2.jpg"] { 
 
display: none; 
 
} 
 

 
.container:hover [src$="1.jpg"] { 
 
display: none; 
 
} 
 

 
.container:hover [src$="2.jpg"] { 
 
display: inline; 
 
} 
 

 
.container { 
 
float: left; 
 
}

<div class="container"> 
 
    <img src="https://www.gravatar.com/avatar/8aecf6164a04433529bd7702f1b5f59a?s=128&d=identicon&r=PG&f=1&1.jpg" /> 
 
    <img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&2.jpg" /> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="https://www.gravatar.com/avatar/b8367b2f25ceee4d54595495b4e51312?s=128&d=identicon&r=PG&f=1&1.jpg" /> 
 
    <img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&2.jpg" /> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&1.jpg" /> 
 
    <img src="https://www.gravatar.com/avatar/8aecf6164a04433529bd7702f1b5f59a?s=128&d=identicon&r=PG&f=1&2.jpg" /> 
 
</div>

Answer 2

Wenn Sie Ihre Bilder vorzuladen möchten, sollten Sie setzen sie in DOM oder fügen Sie als Hintergrundeigenschaften hinzu. Hier ist eine modifizierte Version Ihres Codes, die neben den bereits vorhandenen <img /> Elemente enthält. Ich habe es nicht ausgeführt, aber es sollte funktionieren

$(document).ready(function() { 
    $('.img-grey').map(function() { 
     var temp = document.createElement('img'); 
     temp.src = this.src.replace("1.jpg", "2.jpg"); 
     temp.style.display = 'none'; 
     $(this).parent().append(temp); 
     return this; 
    }).on({ 
     mouseenter: function (e) { 
     var greysrc = $(this).attr('src'); 
     var colorsrc = greysrc.replace("1.jpg", "2.jpg") 
     $(this).attr('src', colorsrc); 
     }, 
     mouseleave: function (e) { 
     var colorsrc = $(this).attr('src'); 
     var greysrc = colorsrc.replace("2.jpg", "1.jpg") 
     $(this).attr('src', greysrc); 
     } 
    }) 
});