cool tech graphics

Improved Lazy Loading for iPhone & Android

The latest version of the jQuery Lazy Load plugin (released Jan 29th, 2012) included the ability to customize your data attribute parameter. This is a pretty helpful update; I realized it could be used to set multiple source images for the same node. Here's how you can use it to optimize images, cutting down on data transfer for mobile devices.

Set up your lazy loading the normal way - generally this is gives you HTML like this:


A cute kitten

The data-original attribute specifies the actual source of your lazy load image. The javascript to complement then looks something like this:


$('img')
.lazyload({
effect : 'fadeIn'
});

Now your lazy loading should be working, if your scripts are included in your page and everything is set up correctly. However, if your site features very large images and you have a responsive stylesheet set up, your readers can benefit from loading optimized images. I like to give a "width-full" class to any images that are full-width optimized. Then I hit that class in my media queries, hiding any .width-full content with display:none;. Because the lazy load script doesn't load hidden images by default, this prevents the script from loading on those images, saving readers the download time.

Now go back to your image tags, and specify the location for the optimized image in a data-mobile attribute. Something like this:


A cute kitten

You can add these changes to your template files when appropriate, so this is all done under the hood.

As it is, your lazy load should still be working the default way in all circumstances. A media query is how we will trigger something different to happen for mobile. With just a few lines of CSS:


@media only screen
and (max-width: 480px) {
.width-full {
display:none;
}
}

Now we add a few lines of jQuery to call out those images. We aren't targeting the class, we're targeting the visibility and the attribute. We only want the lazy load plugin to run the mobile version when the media query rules have hidden it, and only then if it has mobile optimized content. So after our initial lazy load, you can add this:


$('img:hidden[data-mobile]')
.attr('width','')
.attr('height','')
.show()
.lazyload({
effect : 'fadeIn',
data_attribute : 'mobile'
});

There's a few things going on here. First it resets the image height and width attributes so that your image loads without being distorted, then it shows the image, and runs the lazyload directly, using the data-mobile data_attribute parameter. If there's no mobile-optimized version, it will just keep the image hidden. You can cut down load times while making your content available in the right context.

Date posted: February 14, 2012

Comments

Hi Erin,
thank you!

Hi Erin,

thx a lot for your nice idea. Brilliant. Nonetheless there is one important thing to be aware of related to the goal of saving bandwidth.

While

$('img') ...

followed by

$('img:hidden[data-mobile]') ...

does a good job of showing the proper target image, it does not prevent that both image sources are downloaded.

Changing the first object selector to

$('img:not(:hidden)')

solves this.

greets
Olaf

If this is such a good way of loading images, why is Metal Toad not using it. the "work" tab has some pretty huge images, and form my country load very slow. "Do as you preach"?

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

Schedule a Free Consultation

Speak with our team to understand how Metal Toad can help you drive innovation, growth, and success.