Question

我使用javascript来幻灯片显示图像。只有当用户点击下一个按钮时才加载图像，即幻灯片开始前没有预加载。每个图像都有一个支持描述，它由存储在javascript文件中的数组中的相同javascript加载。这样的效果使得即使在显示图像之前也显示对下一图像的描述。请建议我一些方法，以便我可以延迟显示desprition，直到图像加载。加载符号也可能有很大帮助。请让我知道如何做到这一点。感谢。

Answer 1

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

JavaScript Timers with setTimeout and setInterval

Answer 2

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

Answer 3

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

图片幻灯片

3 个答案: