javascript - 将鼠标悬停在链接文本上时加载图像(CSS + Javascript)

Question

我正在使用 CSS 在悬停时显示图像。

HTML 标记

 <a class="preview"  href="#"> Preview
 <img src="thumbnail_01.jpg" class="hide-image" />
 </a>

CSS

.hide-image {
     display: none;
     z-index: 100;
     position: absolute;
}
.preview:hover .hide-image {
     display: block
}

当用户将鼠标悬停在“预览”链接上时，会显示图像。

代码有效。但是，我有 100 多张图片，而且它们都是同时加载的!我希望它们仅在用户将鼠标悬停在链接上时加载。

Answer 1

将鼠标悬停在链接文本上时加载图像。

var alist = document.getElementsByClassName("preview");

for (var i = 0; i < alist.length; i++) {
  alist[i].addEventListener('mouseover', function(num) { 
    return function() {
      loadImg(alist[num]);
    }
  }(i), false);
}

function loadImg(x) {
  x.querySelector(".hide-image").src=x.getAttribute("data-my-img");
}

<a class="preview" href="#" data-my-img="https://www.colormango.com/tipsimg/javascript.jpg">preview JS
  <img class="hide-image" />
</a>