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.

Hugo Rodas
  • 33
  • 4

4 Answers4

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>
João Pimentel Ferreira
  • 14,289
  • 10
  • 80
  • 109
Howard Wang
  • 601
  • 3
  • 18
  • Can you explain the use of "num" within the for-loop? Shouldn't you have used i instead? Why isn't 'num' defined? – Hugo Rodas Jun 21 '17 at 05:50
  • It is about the concept of closure. Check out the following two URLs for details: https://stackoverflow.com/questions/111102/how-do-javascript-closures-work and https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – Howard Wang Jun 21 '17 at 06:27
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.

Vasiliki M.
  • 372
  • 3
  • 12
  • 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 '17 at 02:21
  • Oh ok then you have to use javascript and jquery for more convenience. See my updated answer – Vasiliki M. Jun 21 '17 at 02:34
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..

Rabby shah
  • 103
  • 1
  • 6
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.

sheriffderek
  • 8,848
  • 6
  • 43
  • 70