使用 javascript 自动加载图像

Automatically load an image using javascript

本文关键字：加载 图像 javascript 使用      更新时间：2023-09-26

我正在使用以下代码来构建一个图库：

        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; 
             };
        });
        }

当"鼠标悬停"时，代码在大图像上加载不同的缩略图。现在我想从该缩略图库中"预加载"第一张图像。我尝试使用 onload 与

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

但随后它与鼠标悬停冲突。有什么想法吗？我只能使用javascript，不能使用jquery。

由于您的 var image实际上是图像的集合，因此您需要使用 [0] 索引指针来定位第一个：

window.onload=function(){
  
  var image = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
  var mainImage = document.getElementById('rr_lrg_img'); 
  
  mainImage.src = image[0].src; // Add this line (preload first image into main one)
  
  function toMainImage() {
     mainImage.src = this.src; 
  }
  [].forEach.call(image,function(x){
    x.addEventListener("mouseenter", toMainImage, false);
  });
  
}
.thumbnails img{height:50px;}
<img src="//placehold.it/200x200&text=default" id="rr_lrg_img">
<div class="thumbnails">
  <img src="//placehold.it/200x200/cf5&text=1">
  <img src="//placehold.it/200x200/f0f&text=2">
  <img src="//placehold.it/200x200/444&text=3">
</div>

相关文章：