画像スライドショー

Question

スライドショー画像にjavascriptを使用しています。画像は、ユーザーが次のボタンをクリックしたときにのみロードされます。つまり、スライドショーの開始前にプリロードはありません。すべての画像には、javascriptファイルに格納されている配列から同じjavascriptによってロードされるサポート記述があります。この効果は、画像が表示される前であっても、次の画像の説明が表示されるようにすることである。イメージがロードされるまで、私はdespritionの表示を遅らせることができるようにいくつかの方法を提案してください。ローディングシンボルも大きな助けになるかもしれません。どうすればいいか教えてください。ありがとう。

Answer 1

動的にその画像を表示iframeを追加し、そのiframeにonloadリスナーを追加して、ロード時にのみ説明を表示します。 例：

<script> 
    var i; 
    var ifm; 
    var spinner; 
    function popupIframeWithImageInit(id, parent, initImageNumber) { 
     ifm = document.getElementById(id); 
     i = initImageNumber; 
     if(ifm === null) { 
      ifm = document.createElement('iframe'); 
     } 
     if(!spinner) { 
      spinner = document.getElementById('spinner'); 
     } 
     ifm.setAttribute('src', google_logos[i]); 
     ifm.setAttribute('id', id); 
     ifm.setAttribute('name', id); 
     ifm.setAttribute('height', document.body.clientHeight - 50); 
     ifm.setAttribute('width', '840');//width is fixed because the image is assumed to be fixed size 800 
     ifm.setAttribute('scrolling', 'yes'); 
     ifm.setAttribute('frameborder', '0'); 
     ifm.style.display= 'none'; 
     ifm.onload = function() { 
      document.getElementById("description").innerHTML = pic_description[i]; 
      ifm.style.display= ''; 
      spinner.style.display = 'none'; 
     }; 
     document.getElementById(parent).appendChild(ifm); 
     spinner.style.display = ''; 
    } 
    function next() { 
     ifm.src = google_logos[++i]; 
     spinner.style.display = ''; 
     ifm.style.display= 'none'; 
    } 
    function prev() { 
     ifm.src = google_logos[--i]; 
     spinner.style.display = ''; 
     ifm.style.display= 'none'; 
    } 
    function dismissPopupIframeWithImage(parentId, ifmId) { 
     document.getElementById(parentId).removeChild(document.getElementById(ifmId)); 
     spinner.style.display = 'none'; 
     ifm.style.display= 'none'; 
     return false; 
    } 
    //use large images to see the spinner 
    google_logos = ['http://sharevm.files.wordpress.com/2010/03/googlevsmicrosoft300dpi.jpg', 
    'http://hermalditaness.files.wordpress.com/2010/01/2.jpg', 
    'http://tuescape.files.wordpress.com/2008/10/tous20les20logos20google20par20aysoon.jpg', 
    'http://isopixel.net/wp-content/uploads/2007/02/logos-superbowl.gif']; 
    pic_description = ['http://sharevm.files.wordpress.com/2010/03/googlevsmicrosoft300dpi.jpg', 
    'http://hermalditaness.files.wordpress.com/2010/01/2.jpg', 
    'http://tuescape.files.wordpress.com/2008/10/tous20les20logos20google20par20aysoon.jpg', 
    'http://isopixel.net/wp-content/uploads/2007/02/logos-superbowl.gif']; 
</script> 
<img id="spinner" src="http://publish.gawker.com/assets/ged/img/spinner_16.gif" style="position:absolute; left:100px; top:150px; display:none;"/> 
<div style="" id="panel"></div> 
<div style="" id="description"></div> 
<div > 
    <button onclick="popupIframeWithImageInit('imagePopup', 'panel', 1);">Open</button> 
    <button onclick="prev();"><-- Prev</button> 
    <button onclick="next();">Next --></button> 
    <button onclick="dismissPopupIframeWithImage('panel', 'imagePopup');">Close</button> 
</div 

Answer 2

image onloadイベントのイベントリスナーを追加し、そのイベントハンドラにテキストを表示する必要があります。残念なことに、他のすべてと同様に、すべてのブラウザがこの点で同じ方法で動作するわけではありません。あなたがGoogle image onloadの場合は、いくつかの良い提案があります。あなたはより具体的な答えをしたいが、一方で、私はこのチュートリアルでは、あなたを助けることができると思う場合は、いくつかのコードを表示し、より具体的でなければならないだろう

Answer 3

：

JavaScript Timers with setTimeout and setInterval