Q:

Replace image when mouse hovers

I have this setup here for when my mouse hovers over another photo. For some reason the bootply http://www.bootply.com/HoZBYvFSpx isn't working with it, but here is the code there anyway.
When I run it, it runs very slow and when I scroll by it, it slows the whole browser down. Is there another way to do this without bogging down my browser?

A:

The problem is that your pictures are 4752x3168px, thats is too big, please reduce them to max 1600px. And second if you want more to speed you page, make css to change picture
Here is working fiddle
http://jsfiddle.net/DRRnu/
Also if you want you can make some Jquery preloader for the images like this
http://jsfiddle.net/DHMQM/29/
<div id="container"> 
<ul id="gallery" class="clearfix"> 
<li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/1.jpg" /></a></p></li> 
<li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/2.jpg" /></a></p> </li> 
<li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/3.jpg" /></a></p> </li> 
<li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/4.jpg" /></a></p></li> 
</ul> 
</div> 

