Maybe you’ve seen the “fade-in” effect of the content and images loading as you scroll down on some popular sites (most notably mashable.com) that effect is called “Lazy Load” and I’ll show you to roll it out in under five minutes.
Before we get started, you have download the jQuery and Placeholder image (right-click “save as”)
jQuery Lazy Load (minified) | Lazyload.gif
Now you have to upload those two files. Upload them to /wp-content/uploads/scripts/
Step 1: Insert the following into custom_functions.php
function lazy_load_html() {
?>
<script src="http://cdn.gregrickaby.com/wp-content/uploads/scripts/jquery.lazyload.mini.js.gzip" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
$("img").lazyload({
placeholder : "http://cdn.gregrickaby.com/wp-content/uploads/scripts/lazyload.gif",
effect : "fadeIn"
});
});
</script>
<?php }
add_action('thesis_hook_after_html','lazy_load_html');Step 2 (optional): Turn on the jQuery library in Thesis Options –> Design Options –> JavaScript
Why is this optional? Because you may already have the jQuery library running. To check, you should view your source-code and look for something similar to this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
If you see this, then a plug-in has already loaded jQuery and there is no need to load it twice. (this is the reason 99% plug-ins conflict with each other and break)
Step 3: There is no step three. It was that easy. Enjoy!
For more information, check out the official website: Lazy Load Plug-in for jQuery andw00t for one less plug-in you have to install!
this doesn’t work on IE8 and lower
do you have a fix for it?
Hey, I couldn’t make this work..I am using slidedeck plugin..Is it creating conflicts?
Greg
How would you utilize this code to get the smooth scrolling back to top??
http://snipplr.com/view/12510/smooth-scrolling-with-jquery-and-internal-page-links/
JC, just include JQuery in the head of each page and use this script in your footer…
Going up?
$(function() {
$(‘a.top’).click(function() {
$(‘body,html’).animate({scrollTop:0},800);
});
});
Going up?
$(function() {
$('a.top').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
Damn… it seems I’m incable of embedding code in comments. Anyways, it’s pretty easy to do. Just use that javascript inside a function and make your link have the class that is referenced in the function. In this case top.
Hi Greg, I found the solution and thought he only right thing would be to put it on here. I edited 3 lines of the code which is added to custom_functions
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
$("img").lazyload({
to
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("#content,#footer").find("img").lazyload({
This tells the lazy load only to effect the content and footer divs, and ignore sidebar, header and anything else not specified.
Thanks
Good work.
Thanks David, it helped me! :)
I love this solution. Worked on all the sites I tried it on apart from I have one question.
Is there a way to exclude the sidebar from this?
If you see http://grievousbodilycharm.com/ the sidebar images dont load until you have gone to the bottom and then back to the top, I guess because the sidebar is technically after the content area? Any ideas?
Thanks
Greg,
thanks a lot. I just redesigned my site about a week ago and just added this lil snippet to the mix. It’s a great addition!
JC
w00t!
Just what I was looking for! Thanks so much. I’ve been trying to do this for the past week and now it works!
On a related note, I’ve bee trying to implement javascript or jquery tooltips on my site (I use tooltips extensively to define words that may be unfamiliar to the readers of my blog, but the default tooltips are too slow and generic for them to be noticed by most my readers).
Any thoughts on how to achieve that? Thanks.
Love it!
Would like to see more stuff like this via the thesis ninjas :)
There’s lots more coming as I move my primary business model away from web design and more blogging :)