http://www.rollinleonard.com/projects/abfs/dropceiling/index2.php
I really need Lazy Load or something similar because this page will have 10,000 images. Is there any way to make this work? Did I miss something simple?
-
1For starters, your link to the lazyload plugin is 404ing. That probably qualifies as "something simple" :)John McCollum– John McCollum2010-08-29 21:07:52 +00:00Commented Aug 29, 2010 at 21:07
-
Oh, how silly of me. Thanks for helping a beginner! Okay. I fixed that. Still not there.Rollin– Rollin2010-08-29 21:14:06 +00:00Commented Aug 29, 2010 at 21:14
Add a comment
|
2 Answers
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.
7 Comments
Rollin
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...
John McCollum
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
@quixoto Passing an anonymous callback to the jQuery function is an alternative to $(document).ready(...). api.jquery.com/jquery/#jQuery3
Ben Zotto
@John: Snazzy! Learn something new every day.
Rollin
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.
|
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?
5 Comments
Rollin
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.
boatcoder
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. youtube.com/watch?v=BTHvs3V8DBA Take a look at the way that google maps brings in the image tiles as they become visible.
Rollin
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.
boatcoder
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.
Rollin
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.
