1) грузить все не в одну картинку, а расположить сразу все 6 картинок под друг другом через position: absolute; и при ховере менять скриптом z-index. (у всех к примеру z-index: 0, а у первой 1 и менять)
2) также что и первый вариант, тока менять через visibility:hidden; (не путать с display:none; здесь картинка будет загружаться)
3) использовать слайдер. и через коллбэк методы настроить перелистывание на ховер (могу посоветовать slick slider. очень хорошо кастомизируется)
4) если хотите через прелоад, то вот код на jQ, который создает невидимый див и кидает туда все изображения которые вы хотите и загружает их. чтобы потом если они где то на странице всплывут - они уже будут загружены
<script type="text/javascript">
<!--
jQuery(document).ready(function(){
// preload images
preload([
'path-to/img1.png',
'path-to/img2.png'
]);
function preload(images) {
if (typeof document.body == "undefined") return;
try {
var div = document.createElement("div");
var s = div.style;
s.position = "absolute";
s.top = s.left = 0;
s.visibility = "hidden";
document.body.appendChild(div);
div.innerHTML = "<img src=\"" + images.join("\" /><img src=\"") + "\" />";
var lastImg = div.lastChild;
lastImg.onload = function() { document.body.removeChild(document.body.lastChild); };
}
catch(e) {
// Error. Do nothing.
}
}
});
-->
</script>
