「delayLoad」クラスの中身が、ウィンドウ読み込み後に露出されます。
JavaScriptがオフになっている場合は、「noscript」タグの中身が直接描画されます。
処理を見たい人は、ソースを見てください。利用はご自由に。
<html>
<title>iframeの遅延読み込み</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
function doDelayLoad() {
// 「jquery」を使い、「delayLoad」クラスのすべての要素に処理を行う。
$(".delayLoad").map(function() {
// 内部のHTMLを取得して、コメントアウトを解除して、
// 要素を置換する。
var innrHtml = $(this).html();
innrHtml = innrHtml.replace(/<!--|-->/g, "");
$(this).replaceWith(innrHtml);
});
}
function addEvent(elm, lstnr, fn){
// 要素のリスナーに対して、メソッドを追加するためのメソッド
try{
elm.addEventListener(lstnr, fn, false);
}catch(e){
elm.attachEvent("on"+lstnr, fn);
}
}
// ウィンドウ読み込み時の「load」イベントに、
// 「doDelayLoad)」メソッドを追加する。
addEvent(window, "load", doDelayLoad);
//-->
</script>
</head>
<body>
<center>
<div class="delayLoad">
<!--
<iframe
src="https://automedia.sakura.ne.jp/srch_amzn_2/index.php?cmnd=get&genre=comic"
width=174 height=480 frameborder=0 scrolling="no">
</iframe>
-->
</div>
<noscript>
<iframe
src="https://automedia.sakura.ne.jp/srch_amzn_2/index.php?cmnd=get&genre=comic"
width=174 height=480 frameborder=0 scrolling="no">
</iframe>
</noscript>
<div class="delayLoad">
<!--
<iframe
src="https://automedia.sakura.ne.jp/srch_amzn_2/index.php?cmnd=get&genre=computer"
width=174 height=480 frameborder=0 scrolling="no">
</iframe>
-->
</div>
<noscript>
<iframe
src="https://automedia.sakura.ne.jp/srch_amzn_2/index.php?cmnd=get&genre=computer"
width=174 height=480 frameborder=0 scrolling="no">
</iframe>
</noscript>
</center>
</body>
</html>