jQuery update image src on hover

Question

I don't want the images to load until the link is hovered, so for that here is the script but it's not working, can someone help me in correcting it? I added an event listener to each link, and on mouseover called a function that sets the image. To make things more interesting, we can copy lazyload a bit here and also use the data-original property :)

For example: this is the HTML Code:

<li>
   <a href="#" class="tip_trigger">
      <img class="tip" alt="300 Grams"
              data-original="https://lh5.googleusom/-qCRpw.../300%2520.jpg"
              src='empty.gif' width="90" height="90"/>
      Alex
   </a>
</li>

Then, add an event listener:

Code:

// call for each element with the class 'tip' that's being hovered upon
$('.tip').hover(function()
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});

for a live demo, you can see this page http://bloghutsbeta.blogspot.com/2012/04/testing-slidernav.html the above part of script is only added to the first letter ALEX in 'A' Category.

The live demo nearly crashes my browser because it uses JavaScript for all the effects. Have you ever heard of CSS3 transitions? — Tom van der Woerdt
– Tom van der Woerdt, Commented Apr 23, 2012 at 13:15
@TomvanderWoerdt Maybe you need a better browser/computer. ;) — epascarello
– epascarello, Commented Apr 23, 2012 at 13:19
@TomvanderWoerdt well I think epascarello is not wrong about the browser idea. — CryOfFaclon
– CryOfFaclon, Commented Apr 23, 2012 at 13:39

Fabrizio Calderan · Accepted Answer · 2012-04-23 13:15:15Z

11

.tip is already the image so you cannot find an image with $(this).find('img');

try instead

$('.tip_trigger').hover(function()
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.data('original'));
});

use also .data() method instead of .attr()

answered Apr 23, 2012 at 13:15

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

CryOfFaclon Over a year ago

WOW, you are a genius :) it works, can you tell me like if you are sure about it, that by doing this NO IMAGES WILL load until they are hovered? as I am scared to death if images still load even if it is not hovered

Fabrizio Calderan Over a year ago

yes, the only way that those images have to be loaded is triggering the event (via javascript). So I strongly suggest you to think a technique to ensure accessibility when javascript is not enabled

CryOfFaclon Over a year ago

Well I am not worried with that as I don't want the visitors to come who don't have javascript :) Now I am really really confused, If this much small script can make life easy WHY AM I USING LAZYLOAD, isn't there a script like this that do the same thing Just instead of hover it WORKS FOR SCROLL.

Fabrizio Calderan Over a year ago

lazyload on scrolling is a little-bit different technique. :) Usually on scroll you load some images and then you soon show them as soon as they are ready. Here instead you load and wait a single image every time an hover occurs

CryOfFaclon Over a year ago

Oh so it means I am left to lazyLoad :P I was asking because there is one annoying thing that lazyload is doing and I don't know what to do about it. I have done a post about it too but no one replied, If you don't mind can you have a look at it, here it is stackoverflow.com/questions/10235372/…

epascarello · Accepted Answer · 2012-04-23 13:15:45Z

1

var elem = $(this).find('img'); <-- you are looking for an image when this is the image.

Either replace the element you attach hover to

$('.tip_trigger').hover(function()
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});

or keep it the way it is and do not look for an image

$('.tip').hover(function()
{
   var elem = $(this);

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});

answered Apr 23, 2012 at 13:15

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Tobias · Accepted Answer · 2012-04-23 13:18:01Z

0

You have bound the hover to the img element, therefor you can't find a img child. Just use this, or change the hover to .tip_trigger.

$('.tip_trigger').hover(function() // That should do the trick
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});

edited Apr 23, 2012 at 13:18

answered Apr 23, 2012 at 13:15

Tobias

8839 silver badges17 bronze badges

Comments

primavera133 · Accepted Answer · 2012-04-23 13:19:31Z

0

jQuery.find() searches children. You have already found the img with your ".tip"-selector.

var elem = $(this);

answered Apr 23, 2012 at 13:19

primavera133

1,3141 gold badge15 silver badges25 bronze badges

Collectives™ on Stack Overflow

jQuery update image src on hover

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related