Response title
This is preview!
Move this topic
[jQuery] New plugin - Lazy Load
in Using jQuery
•
15 years ago
Little something I worked on sunday.
http://www.appelsiini.net/projects/lazyload
Plugin which enables deferred loading (lazy loading) of images. In
other words, images which are below the fold (far down the page not
visible in browser) are not loaded before user scrolls down. This
plugin should be useful with long pages which have lot of photo
content. For example photoblogs.
Demo pages is available. You might want to use Firebug or liveHTTP
headers to better see what is happening.
http://www.appelsiini.net/projects/lazyload/enabled.html
--
Mika Tuupola
http://www.appelsiini.net/
Replies(22)
Re: [jQuery] New plugin - Lazy Load
15 years ago
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
Very cool! That's a great idea to save traffic and optimize load times
on image heavy pages.
-- Felix
<div class="moz-signature"><small>--------------------------
My Blog: <a href="http://www.thinkingphp.org">http://www.thinkingphp.org</a>
My Business: <a href="http://www.fg-webdesign.de">http://www.fg-webdesign.de</a>
</small></div>
Mika Tuupola
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
Very cool! That's a great idea to save traffic and optimize load times
on image heavy pages.
-- Felix
<div class="moz-signature"><small>--------------------------
My Blog: <a href="http://www.thinkingphp.org">http://www.thinkingphp.org</a>
My Business: <a href="http://www.fg-webdesign.de">http://www.fg-webdesign.de</a>
</small></div>
Mika Tuupola
Leave a comment on haimuiba's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
Looks like a great plugin but there is something wrong with the demo
page in FF. on IE6 i had no problem.
If i want to switch from disabled to enabled the page keeps on loading
and crashed my browser the first time around. Looking at the page load
in firebug i noticed http://www.appelsiini.net/mint/?js kept on loading.
-- David
Mika Tuupola schreef:
Leave a comment on david.jquery13's reply
Leave a comment on tuupola's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
Great work! This would be useful for any number of sites, including a
couple that I'm working on right now. I'd like to adapt it so that a
loading animation is in the placeholder until the image is requested,
instead of the box that is currently there.
I'm looking forward to this being available for jQuery 1.1.4 in IE.
Thanks for your contribution!
Dan Atkinson
Leave a comment on dandementia's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
I tried to reproduce it again but i observed my behaviour better now and
it happened when i click on the enable/disable link and then do a shift
refresh while the page is still loading. I guess it's not standard
behaviour :)
-- David
Mika Tuupola schreef:
>
>
> On Sep 3, 2007, at 1:35 PM, David Duymelinck
Leave a comment on david.jquery13's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
Very nice plugin - i notice the page starts off at 177kb and up to
909kb once the full page is loaded - very nice savings!!! Can't wait
to try it out on my already heavily optimised code :)
Leave a comment on digitalspaghetti's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
Looks interesting although it doesn't work in Safari.
In Safari the top image loads last.
Leave a comment on tomelsner's reply
Leave a comment on tuupola's reply
Leave a comment on tuupola's reply
Leave a comment on tuupola's reply
Leave a comment on tuupola's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
>> Great work! This would be useful for any number of sites, including a
>> couple that I'm working on right now. I'd like to adapt it so that a
>> loading animation is in the placeholder until the image is requested,
>> instead of the box that is currently there.
>
>http://www.appelsiini.net/projects/lazyload
The Demo page does not work for me in FF2. I have to click on the images to
get them to load...
-Dan
Leave a comment on dswitzer's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
Just FYI, in IE7 none of the images ever loaded, no matter how far I
scrolled down. It wasn't until I clicked on each image that they loaded
correctly.
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Mika Tuupola
Sent: Wednesday, September 05, 2007 4:42 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: New plugin - Lazy Load
Leave a comment on lists.jquery3's reply
Leave a comment on enchos's reply
Leave a comment on tuupola's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
Am I right in assuming that this plugin would be redundant if the JS
was loaded at the bottom of the page?
I'm asking because several of my sites, I don't put JS files in the
head for performance reasons.
Leave a comment on dandementia's reply
Leave a comment on tuupola's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
Thanks for checking it out.
I was thinking about this last night. I thought about maybe writing
something non-jQuery so that the page would hold off loading images
until the page had been loaded to the bottom. But then, I don't want
my guys doing that.
I might just make an exception and put jQuery in the header, but I'm
fairly against that idea for the anal reasons I mentioned before. :-)
Leave a comment on dandementia's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
The idea is perfect! I'd only say you could combine your plugins, and
once the whole page is loaded, you could start loading the lazy images
sequentially, so that the user won't have to wait FOR SURE for those
images. It would be like "balanced" loading.
Leave a comment on flesler's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
Hi Mika,
Great stuff, as always. I'm looking over the source and had a couple of thoughts. It looks like you bind an event handler for each matching element, so 100 images will result in 100 event handlers firing on every scroll. That seems like it wouldn't scale as well as just have one event handler that iterates over the elements. This would also make it fairly easy to add a "keep loading the images after everything else has loaded" type feature that someone else mentioned since you could just start iterating your array of elements in
window.load and maybe use setTimeout to keep the UI from bogging.
Also, with just one handler, you would only have to call $(window).height() and $(window).scrollTop() once per scroll instead of once per element per scroll. In addition, if you knew that the images that were being lazy loaded appear on the page in the order that they appear on the DOM (
i.e., images further down the DOM are also further down the page), as is likely the case in most image gallery type settings where this plugin will be most useful, you could stop checking images once you found one that was "below the fold".
Lastly, does not removing custom attributes lead to memory leaks? I thought I recalled something about not cleaning up expandos leading to memory leakage, but I'm not sure if that applies here.
Just some thoughts. Hope I don't sound too nitpicky. I think it's an awesome plugin, and I'm looking forward to putting it to use!
Thanks Mika!
--Erik
<div><span class="gmail_quote">On 9/3/07, <b class="gmail_sendername">Mika Tuupola</b> <<a href="mailto:tuupola@appelsiini.net">tuupola@appelsiini.net</a>> wrote:</span>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Little something I worked on sunday.
<a href="http://www.appelsiini.net/projects/lazyload">
http://www.appelsiini.net/projects/lazyload</a>
Plugin which enables deferred loading (lazy loading) of images. In
other words, images which are below the fold (far down the page not
visible in browser) are not loaded before user scrolls down. This
plugin should be useful with long pages which have lot of photo
content. For example photoblogs.
Demo pages is available. You might want to use Firebug or liveHTTP
headers to better see what is happening.
<a href="http://www.appelsiini.net/projects/lazyload/enabled.html">http://www.appelsiini.net/projects/lazyload/enabled.html</a>
--
Mika Tuupola
<a href="http://www.appelsiini.net/">http://www.appelsiini.net/
</a>
</blockquote></div>
Great stuff, as always. I'm looking over the source and had a couple of thoughts. It looks like you bind an event handler for each matching element, so 100 images will result in 100 event handlers firing on every scroll. That seems like it wouldn't scale as well as just have one event handler that iterates over the elements. This would also make it fairly easy to add a "keep loading the images after everything else has loaded" type feature that someone else mentioned since you could just start iterating your array of elements in
window.load and maybe use setTimeout to keep the UI from bogging.
Also, with just one handler, you would only have to call $(window).height() and $(window).scrollTop() once per scroll instead of once per element per scroll. In addition, if you knew that the images that were being lazy loaded appear on the page in the order that they appear on the DOM (
i.e., images further down the DOM are also further down the page), as is likely the case in most image gallery type settings where this plugin will be most useful, you could stop checking images once you found one that was "below the fold".
Lastly, does not removing custom attributes lead to memory leaks? I thought I recalled something about not cleaning up expandos leading to memory leakage, but I'm not sure if that applies here.
Just some thoughts. Hope I don't sound too nitpicky. I think it's an awesome plugin, and I'm looking forward to putting it to use!
Thanks Mika!
--Erik
<div><span class="gmail_quote">On 9/3/07, <b class="gmail_sendername">Mika Tuupola</b> <<a href="mailto:tuupola@appelsiini.net">tuupola@appelsiini.net</a>> wrote:</span>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Little something I worked on sunday.
<a href="http://www.appelsiini.net/projects/lazyload">
http://www.appelsiini.net/projects/lazyload</a>
Plugin which enables deferred loading (lazy loading) of images. In
other words, images which are below the fold (far down the page not
visible in browser) are not loaded before user scrolls down. This
plugin should be useful with long pages which have lot of photo
content. For example photoblogs.
Demo pages is available. You might want to use Firebug or liveHTTP
headers to better see what is happening.
<a href="http://www.appelsiini.net/projects/lazyload/enabled.html">http://www.appelsiini.net/projects/lazyload/enabled.html</a>
--
Mika Tuupola
<a href="http://www.appelsiini.net/">http://www.appelsiini.net/
</a>
</blockquote></div>
Leave a comment on erik.beeson's reply
Re: [jQuery] New plugin - Lazy Load
15 years ago
I havent try it yet, but it works with tabs plugin?
<div><span class="gmail_quote">On 9/7/07, <b class="gmail_sendername">Erik Beeson</b> <<a href="mailto:erik.beeson@gmail.com">erik.beeson@gmail.com</a>> wrote:
</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">Hi Mika,
Great stuff, as always. I'm looking over the source and had a couple of thoughts. It looks like you bind an event handler for each matching element, so 100 images will result in 100 event handlers firing on every scroll. That seems like it wouldn't scale as well as just have one event handler that iterates over the elements. This would also make it fairly easy to add a "keep loading the images after everything else has loaded" type feature that someone else mentioned since you could just start iterating your array of elements in
window.load and maybe use setTimeout to keep the UI from bogging.
Also, with just one handler, you would only have to call $(window).height() and $(window).scrollTop() once per scroll instead of once per element per scroll. In addition, if you knew that the images that were being lazy loaded appear on the page in the order that they appear on the DOM (
i.e., images further down the DOM are also further down the page), as is likely the case in most image gallery type settings where this plugin will be most useful, you could stop checking images once you found one that was "below the fold".
Lastly, does not removing custom attributes lead to memory leaks? I thought I recalled something about not cleaning up expandos leading to memory leakage, but I'm not sure if that applies here.
Just some thoughts. Hope I don't sound too nitpicky. I think it's an awesome plugin, and I'm looking forward to putting it to use!
Thanks Mika!
<span class="sg">
--Erik
</span><div><span class="q"><span class="gmail_quote">On 9/3/07, <b class="gmail_sendername">Mika Tuupola</b> <<a href="mailto:tuupola@appelsiini.net" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
tuupola@appelsiini.net</a>> wrote:</span>
</span><div><span class="e" id="q_114e00cf93d084da_4"><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Little something I worked on sunday.
<a href="http://www.appelsiini.net/projects/lazyload" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://www.appelsiini.net/projects/lazyload</a>
Plugin which enables deferred loading (lazy loading) of images. In
other words, images which are below the fold (far down the page not
visible in browser) are not loaded before user scrolls down. This
plugin should be useful with long pages which have lot of photo
content. For example photoblogs.
Demo pages is available. You might want to use Firebug or liveHTTP
headers to better see what is happening.
<a href="http://www.appelsiini.net/projects/lazyload/enabled.html" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://www.appelsiini.net/projects/lazyload/enabled.html</a>
--
Mika Tuupola
<a href="http://www.appelsiini.net/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://www.appelsiini.net/
</a>
</blockquote></span></div></div>
</blockquote></div>
<br clear="all">
--
Rafael Santos Sá :: webdeveloper
<a href="http://www.rafael-santos.com">www.rafael-santos.com</a>
<div><span class="gmail_quote">On 9/7/07, <b class="gmail_sendername">Erik Beeson</b> <<a href="mailto:erik.beeson@gmail.com">erik.beeson@gmail.com</a>> wrote:
</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">Hi Mika,
Great stuff, as always. I'm looking over the source and had a couple of thoughts. It looks like you bind an event handler for each matching element, so 100 images will result in 100 event handlers firing on every scroll. That seems like it wouldn't scale as well as just have one event handler that iterates over the elements. This would also make it fairly easy to add a "keep loading the images after everything else has loaded" type feature that someone else mentioned since you could just start iterating your array of elements in
window.load and maybe use setTimeout to keep the UI from bogging.
Also, with just one handler, you would only have to call $(window).height() and $(window).scrollTop() once per scroll instead of once per element per scroll. In addition, if you knew that the images that were being lazy loaded appear on the page in the order that they appear on the DOM (
i.e., images further down the DOM are also further down the page), as is likely the case in most image gallery type settings where this plugin will be most useful, you could stop checking images once you found one that was "below the fold".
Lastly, does not removing custom attributes lead to memory leaks? I thought I recalled something about not cleaning up expandos leading to memory leakage, but I'm not sure if that applies here.
Just some thoughts. Hope I don't sound too nitpicky. I think it's an awesome plugin, and I'm looking forward to putting it to use!
Thanks Mika!
<span class="sg">
--Erik
</span><div><span class="q"><span class="gmail_quote">On 9/3/07, <b class="gmail_sendername">Mika Tuupola</b> <<a href="mailto:tuupola@appelsiini.net" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
tuupola@appelsiini.net</a>> wrote:</span>
</span><div><span class="e" id="q_114e00cf93d084da_4"><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Little something I worked on sunday.
<a href="http://www.appelsiini.net/projects/lazyload" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://www.appelsiini.net/projects/lazyload</a>
Plugin which enables deferred loading (lazy loading) of images. In
other words, images which are below the fold (far down the page not
visible in browser) are not loaded before user scrolls down. This
plugin should be useful with long pages which have lot of photo
content. For example photoblogs.
Demo pages is available. You might want to use Firebug or liveHTTP
headers to better see what is happening.
<a href="http://www.appelsiini.net/projects/lazyload/enabled.html" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://www.appelsiini.net/projects/lazyload/enabled.html</a>
--
Mika Tuupola
<a href="http://www.appelsiini.net/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://www.appelsiini.net/
</a>
</blockquote></span></div></div>
</blockquote></div>
<br clear="all">
--
Rafael Santos Sá :: webdeveloper
<a href="http://www.rafael-santos.com">www.rafael-santos.com</a>
Leave a comment on rafael.santos's reply
Leave a comment on tuupola's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to tuupola's discussion
{"z2949206":[14737000000249751,14737000000249757,14737000000249767,14737000000249769,14737000000249771,14737000000249773,14737000000249781,14737000000249785,14737000000249795],"z2656670":[14737000000249789],"z2967130":[14737000000249759,14737000000249783,14737000000249787],"z2949138":[14737000000249765],"z2965274":[14737000000249753],"z2957371":[14737000000249755,14737000000249761],"z1872676":[14737000000249793],"z2973241":[14737000000249763],"z2973164":[14737000000249779],"z2973345":[14737000000249777],"z2949596":[14737000000249791],"z2949113":[14737000000249775]}