将鼠标悬停在链接文本上时加载图像（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>

Answer 2

<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>

我想这会对你有所帮助..

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 只在被触发的函数中起作用。

Answer 4

这能解决问题吗？

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 来设置图像源 > 检查图像是否已完全加载 > 然后添加一个类以将其淡入等等 - 但也许您的问题也是图像的大小。也许你也可以让它们的文件大小更小。