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
}

当用户将鼠标悬停在＆＃34;预览＆＃34;链接，图像显示。

代码有效。但是，我有超过100张图像，它们都同时加载！我希望他们只在用户将鼠标悬停在链接上时加载。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

理想的解决方案是使用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 3

<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 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来设置图片来源＆gt;检查图像是否已满载＆gt;然后添加一个类来淡化它等等 - 但也许你的问题也是图像的大小。也许你也可以把文件大小缩小。

将鼠标悬停在链接文本上时加载图像（CSS + Javascript）

4 个答案: