Skip to content

Instantly share code, notes, and snippets.

@jorkas

jorkas/blog_demo_delayed_image_loading.html

Created June 6, 2011 05:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jorkas/1009784 to your computer and use it in GitHub Desktop.
Save jorkas/1009784 to your computer and use it in GitHub Desktop.
Download ZIP
Delayed Image Loading With HTML5 Data Attributes
Raw
blog_demo_delayed_image_loading.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(window).load(function(){
$("a[data-gravatar-url]").each(function(){
$(this).html('<img src="'+ $(this).data("gravatarUrl") +'" alt="'+ $(this).text() +'">');
});
});
</script>
<style>
body{margin:30px;line-height:1em;}
a{display:inline-block;width:300px;height:300px;line-height:1em;}
ul{margin:0;list-style-type:none;display:inline-block;}
li{float:left;width:305px;height:305px;}
</style>
</head>
<body>
<ul>
<li>
<a href="https://github.com/jorkas" title="jorkas" data-gravatar-url="https://secure.gravatar.com/avatar/545615189c431c5632268c2240049341?s=300&d=https://d3nwyuy0nl342s.cloudfront.net%2Fimages%2Fgravatars%2Fgravatar-140.png">Gravatar of jorkas</a>
</li>
<li>
<a href="https://github.com/meeiw" title="meeiw" data-gravatar-url="https://secure.gravatar.com/avatar/f9cc5d6ea6db66e2d0e552d1fec92a19?s=300&d=https://d3nwyuy0nl342s.cloudfront.net%2Fimages%2Fgravatars%2Fgravatar-140.png">Gravatar of meeiw</a>
</li>
<li>
<a href="https://github.com/dbi" title="dbi" data-gravatar-url="https://secure.gravatar.com/avatar/1d61786256cde4ad5a3afb2f1ff3812b?s=300&d=https://d3nwyuy0nl342s.cloudfront.net%2Fimages%2Fgravatars%2Fgravatar-140.png">Gravatar of dbi</a>
</li>
<li>
<a href="https://github.com/richardjohansson" title="richardjohansson" data-gravatar-url="https://secure.gravatar.com/avatar/e6ca352c4ddaf07ff4c29c692887a9cd?s=300&d=https://d3nwyuy0nl342s.cloudfront.net%2Fimages%2Fgravatars%2Fgravatar-140.png">Gravatar of richardjohansson</a>
</li>
<li>
<a href="https://github.com/himynameisjonas" title="himynameisjonas" data-gravatar-url="https://secure.gravatar.com/avatar/4738964a8dd2d88e2c5be5013855f016?s=300&d=https://d3nwyuy0nl342s.cloudfront.net%2Fimages%2Fgravatars%2Fgravatar-140.png">Gravatar of himynameisjonas</a>
</li>
<li>
<a href="https://github.com/janne" title="janne" data-gravatar-url="https://secure.gravatar.com/avatar/5069d8eb591c0b92947a6a245632c346?s=300&d=https://d3nwyuy0nl342s.cloudfront.net%2Fimages%2Fgravatars%2Fgravatar-140.png">Gravatar of janne</a>
</li>
<li>
<a href="https://github.com/martennilsson" title="martennilsson" data-gravatar-url="https://secure.gravatar.com/avatar/96340d2092cc8ff4f02c39cb01c72f21?s=300&d=https://d3nwyuy0nl342s.cloudfront.net%2Fimages%2Fgravatars%2Fgravatar-140.png">Gravatar of martennilsson</a>
</li>
<li>
<a href="https://github.com/martinsvalin" title="martinsvalin" data-gravatar-url="https://secure.gravatar.com/avatar/d1f6789769c66d266a246bd9b24ca982?s=300&d=https://d3nwyuy0nl342s.cloudfront.net%2Fimages%2Fgravatars%2Fgravatar-140.png">Gravatar of martinsvalin</a>
</li>
<li>
<a href="https://github.com/mnordin" title="mnordin" data-gravatar-url="https://secure.gravatar.com/avatar/577b456b2148438074128792ad3d22e5?s=300&d=https://d3nwyuy0nl342s.cloudfront.net%2Fimages%2Fgravatars%2Fgravatar-140.png">Gravatar of mnordin</a>
</li>
<li>
<a href="https://github.com/davidwennergren" title="davidwennergren" data-gravatar-url="https://secure.gravatar.com/avatar/0c2b5c09c1847f80d2f47d75c870100e?s=300&d=https://d3nwyuy0nl342s.cloudfront.net%2Fimages%2Fgravatars%2Fgravatar-140.png">Gravatar of davidwennergren</a>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment