Ideas for switching pictures when the mouse slides over them in JS_javascript techniques

On many websites, we will find that when the mouse slides over a picture, the picture switches to another picture. Here the editor talks about how this is achieved.

Before writing Javascript code we must have experimental HTML code

Copy the code The code is as follows:

Let’s focus on analyzing the JS code

Copy the code The code is as follows:

$(document).ready(function(){
var newImage = new Image(); //Preload image
var oldImage = $('img').attr('src' );
newImage.src = './images/img03.jpg';
$('img').hover(function(){ //Mouse over the image to switch
$('img' ).attr('src',newImage.src);
},
function(){
$('img').attr('src',oldImage);
});
});

What everyone is confused about here is why do we need to preload images? Because unlike our local debugging on the website, the images download so quickly. If it is on the Internet, when the mouse slides over the image to be switched, the replacement image will be temporarily downloaded, and the process of loading the image is relatively slow. So we can solve this problem by preloading images.