Blog pages with lots of images can take a lot of time to load. The loading time can be decreased by using the sexy lazyloading image effect. Lazyloading script loads images when all the other things on a page are loaded and shows them with a stylish fade-in effect. More over, you will see this effect on many high traffic site including mashable.
Lazyload effect can be added using 2 plugins which I am going to share here while there is also custom code for thesis theme users.
jQuery lazy load plugin
jQuery LazyLoad plugin is a really simple solution to get lazyloading effect on your site. Just install and activate the plugin. No settings required. <Link>
- Download jQuery lazy load plugin.
- Upload it to wp-content/plugins folder.
- Open installed plugin from you WordPress dashboard and activate the plugin.
- Congrats! Check your site. You will have the lazyload image effect.
Lazy Loader Plugin
Lazy loader plugin is a bit advanced and give you a lot of control on where to use the lazy load image effect and where not. You can select whether to use the effect on homepage, pages, posts or everywhere. You can also change the effect from fade-in to scroll-in etc. ( Installation is the same as 1st plugin )
Thesis Theme Custom code
Now that’s why we say thesis is the best. Plugins can slow down your blog, that’s why I am sharing custom code which you can use in your thesis theme and have the lazyload effect without using any extra plugin.
1) Download this script and placeholder image. <Link>
2) Upload it to your server.
3) Add the following code in custom.php file.
4) Replace http://www.havefunforever.com/wp-content/themes/thesis_18/custom/scripts/jquery.lazyload.mini.js with script location and http://www.havefunforever.com/wp-content/themes/thesis_18/custom/images/lazyload.gif with the placeholder image location.
5) Go to Thesis Options >> Design Options >> Home Page Display Options and enable jquery library.
Well, that’s it. You will now be having the lazyload image effect in thesis theme blog without using any plugin.
Lazy load is not the only way to improve page speed but there are many other things which you can do to improve your blog loading time. Here are some of the best tutorials from the past, which you can refer to improve your blog load time:
- 7 ways to reduce WordPress blog loading time
- How Thesis theme helps you to lower down WordPress plugins
Do let us know if you use Lazyload method to show your images, do you see any improvement in loading time of your blog after using Lazyload plugin?