Javascript 图像幻灯片

我正在使用javascript来幻灯片显示图像。只有当用户单击“下一步”按钮时才会加载图像，即在幻灯片显示开始之前没有预加载。对于每个图像，都有一个支持描述，该描述由相同的javascript从存储在javascript文件中的数组加载。其效果是，即使在显示图像之前，也会显示下一图像上的描述。请给我建议一些方法，以便我可以延迟显示解压缩，直到加载图像。此外，加载符号可能会有很大帮助。请告诉我怎么做。谢谢。

您需要为image onload事件添加一个事件侦听器，并在该事件处理程序中显示您的文本。不幸的是，与其他所有浏览器一样，并非每个浏览器在这方面的工作方式都相同。如果你在谷歌上搜索，你会发现一些不错的建议。

如果你想得到更具体的答案，你必须展示一些代码，并且更具体一些，但与此同时，我认为本教程可以帮助你：

---

在动态添加的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

var i；
var-ifm；
变量微调器；
函数popupIframeWithImageInit（id、父级、initImageNumber）{
ifm=document.getElementById（id）；
i=初始图像编号；
if（ifm==null）{
ifm=document.createElement（'iframe'）；
}
如果（！微调器）{
微调器=document.getElementById（'spinner'）；
}
ifm.setAttribute（'src'，谷歌标志[i]）；
ifm.setAttribute（'id'，id）；
ifm.setAttribute（'name'，id）；
ifm.setAttribute（'height'，document.body.clientHeight-50）；
ifm.setAttribute（'width'，'840'）；//宽度是固定的，因为假定图像的大小是固定的
ifm.setAttribute（'scrolling'，'yes'）；
ifm.setAttribute（'frameborder'，'0'）；
ifm.style.display='none'；
ifm.onload=函数（）{
document.getElementById（“description”）.innerHTML=pic_description[i]；
ifm.style.display=''；
spinner.style.display='none'；
};
document.getElementById（父）.appendChild（ifm）；
spinner.style.display=''；
}
函数next（）{
ifm.src=谷歌标志[++i]；
spinner.style.display=''；
ifm.style.display='none'；
}
函数prev（）{
ifm.src=谷歌标志[--i]；
spinner.style.display=''；
ifm.style.display='none'；
}
函数dismissPopupIframeWithImage（parentId，ifmId）{
document.getElementById（parentId）.removeChild（document.getElementById（ifmId））；
spinner.style.display='none'；
ifm.style.display='none'；
返回false；
}
//使用大图像查看微调器
谷歌标志=['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'];
图片描述=['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'];
打开
接近
这是可行的，但我想在图像加载时添加一个加载标志。怎么做？