悬停链接文本时加载图像（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多张图片，它们都同时加载！我希望它们只在用户悬停在链接上时加载。

- Hugo Rodas

---

对于 JavaScript，您需要使用 onmouseover 事件。 - A. L

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>

- Howard Wang

---

你能解释一下for循环中“num”的用法吗？难道不应该使用i吗？为什么没有定义“num”？ - Hugo Rodas

这是关于闭包概念的内容。请查看以下两个网址以获取详细信息：https://dev59.com/6XVD5IYBdhLWcg3wBm5h 和 https://dev59.com/v3RB5IYBdhLWcg3wAjNH - Howard Wang

Answer 2

这个可以解决问题吗？

https://jsfiddle.net/sheriffderek/1b0b0h6a 我相信有更简洁的方法来解决这个问题...

$('.thing').hover( function() {
  var $thisThing = $(this);
  var thisSource = $thisThing.data('source'); // get the real image url
  var $thisImage = $thisThing.find('img'); // cache the node for the img
  $thisImage.attr('src', thisSource); // add the src attr of the real url
  $thisImage.one('load', function() { // after a load... (just the one time is all you need .on() vs .one()
    $thisThing.addClass('loaded');
  });
});

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}

.thing-list .thing {
  background: lightgreen;
  position: relative;
  max-width: 100px;
  display: inline-block; // for now
}

.thing-list .link {
  display: block;
}

.thing-list img {
  opacity: 0;
}

.thing-list .title {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

body {
  padding: 1rem;
}

h1 {
  margin-bottom: 1rem;
}

.thing-list .loaded img {
  opacity: 0;
  transition: .2s;
}

.thing-list .loaded:hover img {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Things</h1>

<ul class='thing-list'>

  <li class='thing' data-source='https://unsplash.it/3000'>
    <a class='link image-w' href='#'>
      <img src='https://placehold.it/300' alt='Image name'>
      <h2 class='title'>thing 1</h2>
    </a>
  </li>
  
  <li class='thing' data-source='https://unsplash.it/3100'>
    <a class='link image-w' href='#'>
      <img src='https://placehold.it/300' alt='Image name'>
      <h2 class='title'>thing 2</h2>
    </a>
  </li>

  <li class='thing' data-source='https://unsplash.it/3200'>
    <a class='link image-w' href='#'>
      <img src='https://placehold.it/300' alt='Image name'>
      <h2 class='title'>thing 3</h2>
    </a>
  </li>

</ul>

你需要使用JavaScript来设置图像源，检查图像是否完全加载，然后添加一个类来淡入等等。但也许你的问题还在于图像的大小。也许你可以通过减小文件大小来解决这个问题。

- sheriffderek

Answer 3

最理想的解决方案是使用jQuery，以便图像仅在您希望它加载的时间加载。在您的HTML中，您可以仅加载具有其图像URL路径属性的父div，然后在js代码中初始化图像标记。

<a class="preview" href="#" data-url="thumbnail_01.jpg"></a>

然后在JavaScript中

$(document).ready(function(){
   $(".preview").hover(function(){
     var imgurl = $(this).attr('data-url');
     $(this).html('<img src="'+imgurl+'" class="hide-image" />');
   })
});

如果您在HTML内容中调用图像，无论它是否隐藏，它都会在页面加载时加载。因此，JavaScript 只在触发函数时才起作用。

- Vasiliki M.

---

代码目前可以正常工作。我的问题是...如何使图像仅在用户悬停于链接上时加载，而不是在此之前？现在，所有图像都已预加载，这使页面加载变慢。 - Hugo Rodas

哦，那么你需要使用JavaScript和jQuery来提高便利性。请查看我的更新答案。 - Vasiliki M.

Answer 4

<style type="text/css">
    .hide-image {
     display: none;
     z-index: 100;
     position: absolute;
}
.preview:hover .hide-image {
     display: block
}
    </style>
<a class="preview"  href="#">
 <img src="thumbnail_01.jpg" class="hide-image" />
Link
 </a>

我想这会对你有所帮助。

- Rabby shah