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.
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:
Things to note:
window.onload = 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 ()
For simplicity, jQuery is used.
The important bit is changing the src attribute; the effect itself, whether it’s fading, sliding, etc. is not terribly important.