Where did I went wrong in this script

[cryoffalcon]

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/201...slidernav.html
the above part of script is only added to the first letter ALEX in 'A' Category.

[jscheuer1]

Seems to work here. When I first hover over Alex, it's blank. But then it loads. After that, it's already there so it shows right away.

And after the 300 grams image is cached, even on page reload it replaces the blank image so quickly that it's hardly noticeable. But, as I say, on the very first page load it works just as intended, which is all you could really want. No time is lost loading the image until it's needed, once it's cached, no time is lost loading it at all.

Maybe you're expecting it to be more like Lazy Load where the images, regardless of whether they're cached or not, don't show up until you scroll to them. You could do that here too, even add a fade in effect, but it's really unnecessary.

[cryoffalcon]

Seems to work here. When I first hover over Alex, it's blank. But then it loads. After that, it's already there so it shows right away.

And after the 300 grams image is cached, even on page reload it replaces the blank image so quickly that it's hardly noticeable. But, as I say, on the very first page load it works just as intended, which is all you could really want. No time is lost loading the image until it's needed, once it's cached, no time is lost loading it at all.

Maybe you're expecting it to be more like Lazy Load where the images, regardless of whether they're cached or not, don't show up until you scroll to them. You could do that here too, even add a fade in effect, but it's really unnecessary.

Yah you are right I was trying to do something as lazyload here and I am glad is as I want. As I don't want images to load until they are required as what I am trying to do requires lots of images, so its better they don't load until required. I have one issue with lazy load I was not able to find an answer to it, so I am thinking if you could help me

Well on this test page http://bloghutsbeta.blogspot.com/201...ting-2_04.html you can see that images only load if you scroll, it is what I want and then I have used a callback function so when someone click on buttons like (Bicycle, Motorcycle etc...) the script doesn't stop working rather it use the callback function. But here is a issue, I will explain what it is:

If you load images and then you click on those buttons it reloads the images even though they are not part of user cache but still it do that. I know it is not loading images rather just making it look like it is loading but still this effect takes up time. Is there anyway to handle this, so to make it understand that don't load images that are already in user cache?

[jscheuer1]

We were working on that in another thread where we had a callback, which I see is also on the page linked to in your quote:

        $list.quicksand($sorted_data, $preferences, function(){
   $("img").lazyload({
		effect : "fadeIn"
	});
});

I'm not sure if lazy load actually reloads the image or not, even if it does, since it's in the cache, it should take no time or next to no time to load it. What does take time is the effect (highlighted). So you should be able to change it to:

$list.quicksand($sorted_data, $preferences, function(){$("img").lazyload();});

That should get rid of the delay if the image(s) are already in the cache. But if they're not, it will take whatever time it takes to load them before they show up. With such small images, on most connections this will be a very short time.

[cryoffalcon]

We were working on that in another thread where we had a callback, which I see is also on the page linked to in your quote:

        $list.quicksand($sorted_data, $preferences, function(){
   $("img").lazyload({
		effect : "fadeIn"
	});
});

I'm not sure if lazy load actually reloads the image or not, even if it does, since it's in the cache, it should take no time or next to no time to load it. What does take time is the effect (highlighted). So you should be able to change it to:

$list.quicksand($sorted_data, $preferences, function(){$("img").lazyload();});

That should get rid of the delay if the image(s) are already in the cache. But if they're not, it will take whatever time it takes to load them before they show up. With such small images, on most connections this will be a very short time.

Well you were really helpful to me, you were the thing that was creating that issue was that fadein effect, i got rid of it. You are a very good person, people like you are less to be found in forums, I just clicked thanks as that is the most I can do as I haven't started my site uptill now and I can't donate money in other ways as I am living in Afghanistan so its a bit hard (by the I am Afghan) but I am really thankful to your for your help. Sorry to ask but just one last question. In my other post where I was talking about hover and then image loads, are you sure that until every link is not hover their particular images won't load? as if they still load it will be an issue for me. Here is the link to the page of what I am talking about http://bloghutsbeta.blogspot.com/201...slidernav.html

[jscheuer1]

You're welcome and no payment is required or expected for the help I offer in the main forum. There is a paid requests section and I occasionally get work through it. People sometimes donate for things I do in the rest of the forum, but as I say it's not required or expected. I generally just do whatever interests me, or that I think I might learn something from, or something I know so well it's a simple matter. Things like that.

As to your question, my answer is still the same. Was there any part of it that you didn't understand?

The images do not load until the first hover. After that they are cached so load immediately. The images are so small that even the first time they may appear to load right away. They do not load as part of the page load, so do not slow that down.

[cryoffalcon]

You're welcome and no payment is required or expected for the help I offer in the main forum. There is a paid requests section and I occasionally get work through it. People sometimes donate for things I do in the rest of the forum, but as I say it's not required or expected. I generally just do whatever interests me, or that I think I might learn something from, or something I know so well it's a simple matter. Things like that.

As to your question, my answer is still the same. Was there any part of it that you didn't understand?

The images do not load until the first hover. After that they are cached so load immediately. The images are so small that even the first time they may appear to load right away. They do not load as part of the page load, so do not slow that down.

Well I understood your answer, I was just confirming, now my soul is at peace, thanks a lot for your help, it's hard to find people like you on forums ^^