No Pen Only TeXt: Lazy Load for Images

For those of you who have gone to through some photo blogs and wondered how they got the images to load as you scroll. At first I thought it was some ajax event where it would fetch the photo as you scroll but it's even easier than that. Lazy Load event with the use of JQuery plug-in.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script src="/javascripts/jquery.lazyload.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

    $(function() {

          $("img").lazyload({placeholder : "/img/grey.gif"});

    });

</script>

Here is what you need to do step by step with the help of WordPress or text editor.

In WordPress to go Appearance, and click on the Editor link

On the theme file listing on the right of screen select Header (header.php)

Copy the above code and paste it into the header file within the <header> </header> tag, e.g. paste it below the <link rel="stylesheet" src="..." /> tag is what I did for mine.

Download the JQuery.Lazyload.js file from here or here. Upload it to your website.

Change the src of where your JQuery.Lazyload.js is located above. this is what mine looks like

<script src="http://blog.tnguyen.com/wp-content/plugins/jquery-image-lazy-loading/javascripts/jquery.lazyload.js" type="text/javascript"></script>

That should be it when you are done this is what it should look like in your header.php file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script src="http://blog.tnguyen.com/wp-content/plugins/jquery-image-lazy-loading/javascripts/jquery.lazyload.js" type="text/javascript"></script>

  <script type="text/javascript" charset="utf-8">

      $(function() {

          $("img").lazyload({placeholder : "http://blog.tnguyen.com/wp-content/plugins/jquery-image-lazy-loading/img/grey.gif"});

      });

  </script>
</head>

Hit the "Update File" button and check out your website to see if Lazy Load is not working

If nothing works comment below.

The reason why I'm blogging about this is that it took me a few days to figure this out. With so many people using this lazy load method very few website showed how to get it work properly. I had a WordPress Plug-in that does this but it did not work for me. There were so many reasons but I surmise it had something to do with the JQuery file itself. This is one method that I've found to work for me.

To give credit where credit is due the main source of all of this came from Mika Tuupola.

Monday, March 15, 2010

Lazy Load for Images

1 comment: