ansaurus

Question

lazy load js not working. followed instructions. head scratching. see link.

Answer 1

+3 A:

What's happening here is that you are calling the function in the head of the page, before any img elements exist. Try this instead - it waits until the DOM is ready before trying to apply lazyloading:

<script type="text/javascript">
    $(function(){
        $("img").lazyload({
        placeholder : "img/grey.gif",       
        effect      : "fadeIn"
        });
    });
</script>

This example comes from the docs.

John McCollum 2010-08-29 21:26:42

So I replaced my script with the one you have there. Was that what I was supposed to do or should I place it within the body? I tried putting it within the body tag too and both resulted:It now appears to be replace all images with grey.gif AFTER they all load.Thanks for looking at this...

Rollin 2010-08-29 21:43:58

Yes, this should replace your script tags. Can you do me a favour, and try the code again? (I've changed it.) It seems to be replacing all 10k images, and it seems to be struggling to do so.

John McCollum 2010-08-29 22:02:50

@John: do you mean that to be `$(document).ready(...)` ?

quixoto 2010-08-29 22:06:04

@quixoto Passing an anonymous callback to the jQuery function is an alternative to $(document).ready(...). http://api.jquery.com/jquery/#jQuery3

John McCollum 2010-08-29 22:09:27

@John: Snazzy! Learn something new every day.

quixoto 2010-08-29 22:14:54

Alright. I had to go get my cat. Lost outside. Updated with your new code. New interesting development. It now at least stops loading images after the images within the view port are loaded. However, it acts very funny. Let images load. Scroll down. See how it kinda freezes a bit and shows no fadeIn effect. Seems to be working.. Just very very clunky.

Rollin 2010-08-29 22:23:30

It seems that this plugin does struggle with large numbers of images - after googling, I found users having problems when 3-400 images were in use. Perhaps you could try an alternative plugin? If you're flexible on using jQuery, there's this one: http://davidwalsh.name/mootools-lazyload

John McCollum 2010-08-30 11:31:56

Great! I'll try that. Thanks for all your help. Glad you told me that it wasn't just me struggling to make it work with a large number of images.

Rollin 2010-08-30 17:39:23

Answer 2

+1 A:

To help you solve the problem get firebug, open up the firebug section, and pick the net tab. That will show you every request made to the server and response from the server. You will also want to open the "Error Console" to make sure the javascript code is actually running (no syntax error) preventing you from getting there.

However with the page you are using, ouch....

Why in the world would you WANT to do this?

Mark0978 2010-08-29 22:44:40

Why would I want to make it not load what's below the view port or why would I want the page to have 10000 images on it?The former because I'm under the impression it will stop the user from having to download all images on the page at once and rather load them in sections as they scroll down. The answer to the ladder is because that's what I want. I want 10000 images on one page. Do you have a better way to get 10000 individual images on a page at once? I'd welcome any suggestion for how to do that.

Rollin 2010-08-30 01:12:59

Well, I'd probably look at using background images, and combining large swaths of the background into a large sprite image. 10,000 separate images is going to kill performance for the user.http://www.youtube.com/watch?v=BTHvs3V8DBATake a look at the way that google maps brings in the image tiles as they become visible.

Mark0978 2010-08-30 12:39:07

That's fine and I understand why that's a muuuuch better way. I just have a very strict requirement: they must be separate images.

Rollin 2010-08-30 17:37:45

Then I would suggest you take a page from google maps and only load the visible ones. It never finished loading them on my browser, however it did make my browser non-responsive. Sometimes strict requirements get in the way of good solutions.

Mark0978 2010-08-30 21:42:13

Well, sometimes projects just aren't possible. Without complying with the strict requirements of this project it becomes another project entirely (one I'm much less interested in seeing). I'm fine with that and will move on. My question to the SOF community was specific. If there isn't a useful answer, sage words fill in.

Rollin 2010-08-31 02:59:18

ansaurus

tags:

views:

answers:

lazy load js not working. followed instructions. head scratching. see link.

related questions