0

I'm using this scrpt to load bigger image from thumbnail on a product listing page:

$(function() {
$('a.listingProductImageTooltip').tooltip({
    track: true,
    delay: 0,
    showURL: false,
    bodyHandler: function() {
        return "<img src='"+ $(this).attr('rel') +"' alt='image preview' /><div style=\"padding-top: 10px\">"+ this.tooltipText+"</span>";
},
    fade: 250
}); });

But how can i preload the new bigger image to show in the tooltip plugin?

Tnx in advance

benzo
  • 55
  • 2
  • 12

1 Answers1

0

As I can see you store the bigger size img src in the rel attribute. So you can do this after your page finished its initial load

$(window).load(function() {
    $('a[rel]').each(function() {
        var theImage = new Image();
        theImage.src = $(this).attr('rel');
    });
});

It will create Javascript image objects and assign the rel attribute of each anchor to the src of each image object. So the images will be pre-loaded in the background

devnull69
  • 16,402
  • 8
  • 50
  • 61
  • It's a good idea, but i wan't to load the new image only if a customer pass mouse over the thumbnail. – benzo Apr 26 '12 at 13:38
  • I don't understand ... isn't the mouse over already the trigger for the tooltip? So when exactly do you want to preload? Please be more specific – devnull69 Apr 26 '12 at 14:15
  • A customer passing mouse over the thumbnail should view a busy image before viewing the new image. Tooltip plugin in "bodyHandler" setting doesn't preload the image. I want make something like this http://www.ajaxshake.com/demo/EN/461/3a114ccd/put-an-image-as-a-tooltip-with-javascript-preloading-the-images-imgpreview.html – benzo Apr 26 '12 at 14:44
  • Ok, but technically speaking this would not be "pre-loading" because you will only load the image as soon as you want to show it. Besides, you will have to change the plug-in to accomodate for your needs. Following my answer you won't have to wait for the image tooltip to show – devnull69 Apr 26 '12 at 18:33