Javascript Corner - jquery.lazyload

I've used this usefully little plugin on several projects, and Scott Hansleman recently highlighted it in his Pinching pennies when scaling in The Cloud blog post. It's useful for situations where:

• ou want to load images based on some convention but aren't sure if they exist
• You want to load only images that the use is able to see on their page

 

ake this example that I've been working on this week. It's a leader board for our timesheeting application that shows the current top biller for the year

View fullsize

Figure: Bad Example - Broken images everywhere

n this instance, the employee profile images are being loaded by convention, and not all employees have photos, that's why you see broken images here. Now there's a few ways of solving this:

1. heck the file system for the employee file (this has a few problems)
2. heck via HTTP the image exists on the external server

The problem with checking the file system is, that the file can still be broken if it is trying to get an image served from a CDN instead, 

Checking via HTTP headers is possible and can be done without downloading the file but as always, if you have lots of files this can slow down the rending of your page.

jQuery.LazyLoad is a great client side solution as we first render a placeholder image and then (on the client side) request the actual image and then replace the placeholder with the downloaded image. It's very lightweight and simple to use.

• Reference the jquery.lazyload.min.js file

<script src="@Url.Content("~/Scripts/jquery.lazyload.min.js")"></script<

• Render the image tags as follows:

 <img class="full lazy" data-original="@emp.PhotoUrl" src="@Url.Content("~/Content/EmpPhotos/placeholder.png")" />

• Call the lazyload() method on document ready

   <script>
        $(function() {
            $("img.lazy").lazyload();
        });
    </script>

Now all the broken images have a place holder image by default, and the client downloads and replaces the employee photos for employees who actually do have a photo.

Figure: Good Example - Image placeholders show up instead of broken images

Javascript Corner - jquery.cookie

​I'm trying to do a regular post on useful javascript libraries and plugins to existing frameworks such as jQuery, knockoutJs etc...

​So to kick things off, let me introduce jquery.cookie. This usefully little library allows you to get and set cookies on the client side. Now why might you want to do this?

• ​Serve up a generic cached page and personalize based on cookie information (a lot of sites do this, like eBay shows your name, but will still require you to sign in)
• Retrieve some information via AJAX and save it to a cookie

​I've used this on several projects in the past, and it's nice and easy to use.

• Reference the script in your page
• Grab a copy from ​https://github.com/carhartl/jquery-cookie

<script src="/path/pto/jquery.cookie.js"></script>

• .Set a cookie

var userProfile = {
    Name: 'Eric Phan',
    Age: 28,
    LastLogin: '2013-04-22 11:24 PM' 
};

var cookieOptions = {
    expires: 7, // expire in 7 days	
    path: '/', // path of the cookie
    domain: 'ericphan.net', // domain the cookie is valid for
    secure: false // whether to transmit the cookie over HTTPS
};

// Need to store the JSON data as string
$.cookie('UserProfile', JSON.stringify(userProfile), cookieOptions);

View fullsize

• Get a cookie

var cookie = $.cookie('UserProfile');

// Convert the string value back to JSON
var userProfileData = JSON.parse(cookie);

console.log(userProfileData.Name)

• Delete a cookie

$.removeCookie('UserProfile', { path: '/', domain: 'ericphan.info'});

​Really simple and easy to use. Props to Klaus Hartl for developing such a handy little plugin.