JavaScript：无法实现延迟加载与Loader功能，图片未在指定Div显示

我来帮你搞定这两个问题，咱们一步步分析修改：

问题根源 #

1. 图片直接打开而非显示在div：点击<a>标签时，浏览器默认会执行跳转行为，导致页面刷新，图片直接打开，同时加载动画刚显示就被打断。
2. 加载动画仅显示1秒：同样是因为页面跳转，loader还没到设定的延迟时间就被刷新掉了。另外原代码中loader的隐藏逻辑提前执行，也会导致显示时间异常。

修改后的完整代码 #

HTML（新增基础样式）

<div id="content"> 
    <h3>Select Images Below</h3> 
    <ul id="imagegallery"> 
        <li>
            <a href="./img/team/t1.jpg" title="Black Man in Glasses" >
                <img src="./img/team/t1.jpg" alt="the band in concert" height="75px" width="75px" />
            </a>
        </li>
        <li>
            <a href="./img/team/t2.jpg" title="Black Man in Glasses" >
                <img src="./img/team/t2.jpg" alt="the band in concert" height="75px" width="75px" />
            </a>
        </li>
        <li>
            <a href="./img/team/t3.jpg" title="Brown Women">
                <img src="./img/team/t3.jpg" alt="the guitarist" height="75px" width="75px" />
            </a>
        </li>
        <li>
            <a href="./img/team/t4.jpg" title="White Women">
                <img src="./img/team/t4.jpg" alt="the audience" height="75px" width="75px" />
            </a>
        </li>
    </ul> 
    <div id="loading">
        <img src="img/loading.gif" alt="Loading...">
    </div>
</div>

<style>
/* 初始隐藏加载动画 */
#loading {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#placeholder {
    padding: 20px;
    margin-bottom: 50px;
}
</style>

JavaScript

function showPic(whichpic) { 
    var source = whichpic.getAttribute("href"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src", source); 
    
    // 更新图片描述
    var text = whichpic.getAttribute("title") || ""; 
    var imageDescription = document.getElementById("imageDescription"); 
    if (imageDescription.firstChild.nodeType == 3) { 
        imageDescription.firstChild.nodeValue = text; 
        // 这里的test、test1变量如果没定义，需要补充对应逻辑
        // imageDescription_d.innerHTML=test 
        // imageDescription_d2.innerHTML=test1 
    } 
} 

function preparePlaceholder() { 
    if (!document.createElement || !document.createTextNode || !document.getElementById || !document.getElementById("imagegallery")) return false; 
    
    var placeholder = document.createElement("img"); 
    placeholder.setAttribute("id","placeholder"); 
    placeholder.setAttribute("src","./img/resources/neutral_1.jpg"); 
    placeholder.setAttribute("alt","your image goes here"); 
    
    var description = document.createElement("p"); 
    description.setAttribute("id","description"); 
    description.appendChild(document.createTextNode("Choose an image")); 
    
    var imageDescription= document.createElement('h1'); 
    imageDescription.setAttribute("id","imageDescription"); 
    imageDescription.appendChild(document.createTextNode("")); 
    
    var imageDescription_p= document.createElement('p'); 
    imageDescription_p.setAttribute("id","imageDescription_p"); 
    var imageDescription_d= document.createElement('div'); 
    imageDescription_d.setAttribute("id","imageDescription_d"); 
    var imageDescription_d2= document.createElement('div'); 
    imageDescription_d2.setAttribute("id","imageDescription_d2"); 
    
    var gallery = document.getElementById("imagegallery"); 
    insertAfter(description, gallery); 
    insertAfter(placeholder, description); 
    insertAfter(imageDescription, placeholder); 
    insertAfter(imageDescription_p, imageDescription); 
    insertAfter(imageDescription_d, imageDescription_p); 
    insertAfter(imageDescription_d2, imageDescription_d); 
} 

function prepareGallery() { 
    if (!document.getElementsByTagName || !document.getElementById || !document.getElementById("imagegallery")) return false; 
    
    var gallery = document.getElementById("imagegallery"); 
    var links = gallery.getElementsByTagName("a"); 
    
    for ( var i=0; i < links.length; i++) { 
        links[i].onclick = function(e) { 
            // 1. 阻止a标签默认跳转行为，核心！
            e.preventDefault();
            
            // 2. 隐藏图片列表和占位图，显示加载动画
            document.getElementById("imagegallery").style.display='none';
            document.getElementById('placeholder').style.display='none';
            document.getElementById('loading').style.display = 'block';
            
            // 3. 保存当前a标签引用，避免this指向问题
            const currentLink = this;
            
            // 4. 延迟执行图片加载逻辑
            setTimeout(()=> {
                showPic(currentLink);
                // 5. 加载完成后隐藏动画，显示图片
                document.getElementById('loading').style.display = 'none';
                document.getElementById('placeholder').style.display='block';
            }, 5000); // 这里的5000就是你要的延迟毫秒数
            
            // 双重保险阻止默认行为
            return false;
        } 
    } 
} 

// 假设你已经有这个加载事件函数
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

addLoadEvent(preparePlaceholder); 
addLoadEvent(prepareGallery); 

关键修改点说明 #

1. 阻止默认跳转：通过e.preventDefault()和return false双重方式，彻底阻止<a>标签的跳转行为，确保页面不会刷新，图片能在指定div内显示。
2. 调整加载逻辑顺序：把隐藏loader、显示图片的操作移到setTimeout的回调函数里，确保延迟时间结束后再执行这些操作，保证加载动画能完整显示设定的时长。
3. 修复this指向：通过保存currentLink变量，确保延迟执行时showPic能拿到正确的图片链接。
4. 初始隐藏loader：通过CSS设置#loading { display: none; }，避免页面加载时loader就显示出来。

现在测试一下：点击图片后，图片列表会隐藏，加载动画显示5秒，之后动画消失，目标图片会显示在下方的placeholder里，同时描述也会更新。

内容的提问来源于stack exchange，提问作者tsu90280