使用javascript自动加载图像

我正在使用以下代码构建库：

        window.onload=function(){
        var image = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
        var mainImage = document.getElementById('rr_lrg_img'); 

        [].forEach.call(image,function(x){ 
            x.onmouseover = function(){
                 mainImage.src = x.src; 
             };
        });
        }

“onmouseover”时，代码会在大图像上加载不同的缩略图。现在，我想“预加载”缩略图库中的第一张图像。我试着用onload和

rr_lrg_img.src=document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img')[0].src

---

但是，它与onmouseover冲突。有什么想法吗？我只能使用javascript，不能使用jquery。

由于您的var

图像实际上是一组图像，因此您需要使用
[0]
索引指针指向第一个图像：


window.onload=function（）{
var image=document.getElementsByClassName（'thumbnails'）[0].getElementsByTagName（'img'）；
var mainImage=document.getElementById（'rr_lrg_img'）；
mainImage.src=image[0].src；//添加此行（将第一个映像预加载到主映像中）
函数toMainImage（）{
mainImage.src=this.src；
}
[]forEach.call（图像、函数（x）{
x、 addEventListener（“mouseenter”，toMainImage，false）；
});
}
。缩略图img{高度：50px；}

谢谢@Roko C.Buljan，回答得很好！但愿我能给你一杯啤酒。由于我对javascript非常陌生，对最佳实践几乎一无所知，因此我还需要“作废”锚点上的HREF，如
var-anchor=document.getElementsByClassName（'thumbnails'）[0].getElementsByTagName（'a'）；anchor.href='#'
您将如何将其放入代码中？@Rose为什么将href设置为
#
？在您的问题中，您要求hot更改元素的
src
。如果您100%确定无法在此处找到有关如何更改锚HREF的问题，请提出一个新问题。不用担心，我刚想出来：）我需要将它们设置为#以使多媒体资料与移动屏幕兼容（点击）。再次感谢你的主要答案，它真的很有帮助。