ECMAScript lazy load

How to lazy load everything?

I mean images, iframes, texts and all html! With a (dirty?!?) trick, using <noscript></noscript> and a touch of magic real script.

With graceful degradation javascript fallback! And with responsive image polyfill.

A custom event for activate the loading, in this case a click, but can be any event.

in IE 7 and 8 it's impossible to retrieve the contents of a <noscript> element, so I use Internet Explorer conditional comments.

HTML

<!--[if (gt IE 8)]><!--><div id="lazy"><noscript><!--<![endif]-->
HTML CONTENT HERE
<!--[if (gt IE 8)]><!--></noscript></div><!--<![endif]-->

ECMAScript

function buttonLoadClick(){
    var el=document.getElementById('lazy');
    var content=el.firstChild.textContent||el.innerHTML;    
    el.innerHTML = content;
    picturefill();  
}
var buttonLoad = document.getElementById('load');
buttonLoad.addEventListener("click", buttonLoadClick, false);

Live example

Load good music and an image