2011-07-09 7 views
1

I-Frameをアニメーション化したい場合は、そのソースページを読み込みます。私は部分的にJavaScriptコードを使って、私の目標を達成しましたが、このLoading Imageの表示でIframeのURLを更新する方法

function reloadIt() 
{ 
    frm=document.getElementsByName("pagers")[0];  //we get the iframe object 
    frm.src=frm.src;  //or you can set the src to a new src 
    setTimeout("reloadIt()",100000);   //the function will run every 60000 miliseconds, or 60 seconds 
} 

ようになり、私のHTML本文コードが

<body onload="reloadIt()"> 

はここに、私のIFRAMEコードは、この

<div id="divLoading"> 
    <div style="width:100%; height:200px; align="center"> 
     <img src="loader.gif" alt="" align="absmiddle"/> 
    </div> 
</div> 
<div id="divFrameHolder" style="display:none"> 
    <iframe src="lead.php" height="450px;" width="100%" name="pagers" onload="hideLoading()" > </iframe>` 
</div> 

と、この作品のように書きますこのhtmlページが最初に読み込まれたときにうまくいけば、そのソースページが読み込まれるまでIframeにImageを読み込むことができます。しかしIFrameが更新される時間間隔の後、読み込み中の画像がなく、そのソースページがリロードされます。

答えて

0

jqueryプラグインBlockUiをご覧ください。 (http://jquery.malsup.com/block/#element)。このようなものを試してみてください:

function reloadIt() { 
     $("#iframeholder").block({ 
      message: '<img src="css/ajax-loader.gif"/>', 
      css: { width: "600px;", height: "400px;" } 
     }); 
     $('#pagers').attr('src', $('#pagers').attr("src")); 
     $('#iframeholder').unblock() 
     setTimeout("reloadIt()", 5000); 
} 
+0

これが役に立つ場合は、答えとしてマークしてください – Eonasdan