Tag Archives: jQuery.data()

Delay loading images with HTML5 data- Attributes


| View Code on JS Bin |


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.


HTML and jQuery Library:

< !DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<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>
  <h1>Loading-Delayed Image</h1>
  <img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />


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


Read the rest
Posted in HTML5, jQuery, Web Design | Also tagged , , , , , | Comments closed
  • Currently Reading: