Delay loading images with HTML5 data- Attributes

Share
Tweet about this on TwitterShare on Facebook0Share on Google+0Share on Reddit0Share on StumbleUpon0Share on LinkedIn0Email this to someoneShare on Tumblr0Digg this

Purpose

Intro animations (e.g., my Pure CSS3 Sliding Title) can appear jerky on pages loading a large amount of external data. If numerous images or Iframes immediately compete for resources, they initially can can bog down the page. Fortunately, you can delay the loading of those resources with a special combination of pure JavaScript, jQuery.data() (jQuery 1.4+) and the HTML5 custom data attributes. This solution requires no AJAX.

Code

HTML and jQuery Library:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <title>Pure CSS3 Sliding Title</title>
</head>
<body>
  <h1>Loading-Delayed Image</h1>
  <img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>

JavaScript:

$(document).ready(function () {
      setTimeout(function () {
        $('.load-delay').each(function () {
            var imagex = $(this);
            var imgOriginal = imagex.data('original');
            $(imagex).attr('src', imgOriginal);
        });
    }, 3000);
});

Explanation

One way to delay an image’s loading is to A) Start by displaying a loading GIF (create one at Preloaders.net or Ajaxload.info), and then B) Use JavaScript’s setTimeOut() method to determine when that image’s src value will be changed to the desired filepath. However, where do you originally store that filepath? Storing it as a value of an attribute such as “title”, “alt” or “name” can be problematic. Storing it in JSON or in hidden span element is better, but best would be embedding the filepath into the image tag itself.

Here come HTML5 custom data attributes, which allow you to create arbitrarily named attributes of the form “data-*”. An HTML5 custom data attribute’s sole purpose is to hold a string. In the HTML code above, I named the filepath-containing attribute “data-original”, and assigned the image a class of “load-delay”. Next, jQuery.data() extracted the filepath from the “data-original” attribute, and I assigned that filepath to be the new value of the image’s source.

If I wanted to delay the loading of even more images, I would assign those images the class of “load-delay” and give each image its own “data-original” attribute and filepath. If the loading GIFs and loaded images are to be of different sizes, I could assign each image tag the attributes “data-height” and “data-width”, and modify the rest of the HTML and jQuery accordingly.

Happy Coding, and feel free to share this post!

Share
Tweet about this on TwitterShare on Facebook0Share on Google+0Share on Reddit0Share on StumbleUpon0Share on LinkedIn0Email this to someoneShare on Tumblr0Digg this
This entry was posted in HTML5, jQuery, Web Design and tagged , , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.
  • Muhammad

    Very useful script. This is the only easiest Lazyload script on the internet. However, your script has no solution for javascript fallback. If I put then the browser loads correctly noscript image but the data-original fails to load correctly and gif images loads.

    • Sean DeButts

      Muhammad, thank you for your feedback. I will consider this for a future post!

  • http://www.studio-navivo.it Antonio

    Great script!
    Is there a easy modification to make the same with a background image?

  • http://killdistance.grn.cc John Murray

    Nice and useful, by the way, is it usable for player widget?

  • Utilisateurdetest Testeur

    Hello Sean,
    This is a simple but brilliant solution, thanks for sharing. I was just wondering if hiding the source image like this would also hide the image for Google.
    Thanks!

  • Currently Reading:

  •   
  •