怎么在元素可见时执行制定事件 _Web前端

如何在元素可见时执行制定事件
<html>
<head>
<title>Example</title>
</head>

<body>
<div id="hiddenNode" style="display:none; width:100px; height:80px;"></div>
<a href="javascript:display()">Display</a>

<script language="javascript">
var Fanappz = Fanappz || {};

Fanappz.setTimeout = function(callback, timeOut){
	var args = Array.prototype.slice.call(arguments,2); 
　　var _cb = function(){
		callback.apply(null,args);
	}
	window.setTimeout(_cb,timeOut);
}

Fanappz.onDisplay = function(nodeId, exeFunction){
	var node = document.getElementById(nodeId);
	if(!node){//No specified node is found.
		return;	
	}
	
	var args = Array.prototype.slice.call(arguments,2); 
	var display = node.style.display;
	if(display == '' || display == 'block'){
		exeFunction.apply(null, args);
	}else{
		var newArgs = [Fanappz.onDisplay, 2000].concat(Array.prototype.slice.call(arguments,0));
		Fanappz.setTimeout.apply(null, newArgs);
	}
}

function resizeImage(nodeId, src){
	var node = document.getElementById(nodeId);
	var width = node.clientWidth;
	var height = node.clientHeight;
	
	var img = '<img src="' + src + '" width="' + width + '" height="' + height + '"/>';
	node.innerHTML = img;
}
var img = 'http://www.google.com.hk/intl/zh-CN/images/logo_cn.png';

Fanappz.onDisplay('hiddenNode', resizeImage, 'hiddenNode', img);
function display(){
	document.getElementById('hiddenNode').style.display = 'block';
}
</script>
</body>
</html>