Aurora Australis
Sep 27 2011 · Random
Posted by @Favidat,
Sep 17 2011 · Web Design
While it’s easy to decry Flash and espouse the merits of HTML5, it’s worth taking a look at some of the positive elements found on many Flash sites and seeing what can be brought over to the HTML side. One very obvious aspect is the presentation of images. Flash sites almost never render an image in the way that an <img> tag is rendered by the browser. Flash sites will (typically) elegantly animate or fade an image in/out whereas the default browser behavior for HTML is to progressively render the image as it is received (sometimes images are 2D interlaced for a slightly better effect). Even worse, many HTML sites leave width and height as attributes to be determined dynamically for the <img> tag, resulting in page content shifting around as images are loaded.
Better image presentation is certainly possible with HTML + Javascript, and there are tons of beautiful JS image galleries on the web, but outside of such galleries most developers don’t attempt anything beyond the typical <img> presentation.
So, I did a little experiment with 2 goals in mind:
I’m pretty happy with the results.
View the demo
(disable your browser cache so that loading latency is accurately taken into account)
Here’s what I did:
e.g.
<img
data-src="http://aautar.digital-radiation.com/elegant-img-loading/p1.jpg"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC"
width="200"
height="150"
alt="photo" />
Things to note:
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function ()
{
$('img').each(function ()
{
var imgElem = $(this);
var src = imgElem.attr('data-src');
var img = new Image();
img.src = src;
img.onload = function ()
{
imgElem.fadeTo('fast', 0.0001, function ()
{
imgElem.attr('src', src);
imgElem.fadeTo('slow', 1)
});
}
});
}
</script>
For simplicity, jQuery is used.
After the page is loaded, the data-src attribute of every <img> element is read. The image, specified by the data-src attribute, is loaded via a Javascript Image object and, once loaded (Image.onload event fires):
The important bit is changing the src attribute; the effect itself, whether it’s fading, sliding, etc. is not terribly important.