3

I am using CSS to show an image on hover.

HTML Markup

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

When the user hovers over the "preview" link, the image displays.

The code works. However, I have over 100 images and they all load at the same time! I would like them to load only when the user hovers over the link.

1
  • for javascript, you will need need to use the onmouseover event
    – A. L
    Jun 21, 2017 at 2:09

4 Answers 4

1

Load image while hovering over the link text.

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>

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

This will help you i think..

0

The ideal solution for that is to use jQuery in order for the image to load only the time you want it to. On your html you could load only the parent div with an attribute of its image url path and then into the js code, initialize the image tag.

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

and then in JavaScript

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

If you call the image on the html content either it is hidden or not it will load as soon as the page loads. So the javascript does the trick only into the function that is triggered.

2
  • The code is currently working. My question is...How do I make it so that the image only loads when the user hovers over the link, and not before? As of now, all the images are pre-loaded, making the page slow to load.
    – Hugo Rodas
    Jun 21, 2017 at 2:21
  • Oh ok then you have to use javascript and jquery for more convenience. See my updated answer Jun 21, 2017 at 2:34
0

Does this do the trick?

https://jsfiddle.net/sheriffderek/1b0b0h6a I'm sure there are much smoother ways to do this...

$('.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>

You'll have to use JavaScript to set the image source > check for image fully loaded > then add a class to fade it in etc. - but maybe your problem is also the size of the images. Maybe you can also get them smaller in file-size.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.