iframe添加loading效果
在iframe中添加loading效果,通常意味着在iframe的内容加载之前向用户展示一个加载动画。以下是一个简单的示例,展示了如何使用JavaScript和CSS为iframe添加loading效果。
HTML:
<div class="iframe-container">
<iframe id="my-iframe" src="your-content-url.html"></iframe>
<div class="loading-overlay">
<div class="loading-icon"></div>
</div>
</div>
CSS:
.iframe-container {
position: relative;
display: inline-block;
}
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease-out;
}
.loading-icon {
border: 6px solid #f3f3f3; /* Light grey */
border-top: 6px solid #3498db; /* Blue */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
JavaScript:
const iframe = document.getElementById('my-iframe');
const overlay = iframe.parentNode.querySelector('.loading-overlay');
iframe.onload = () => {
// 隐藏加载动画,显示iframe内容
overlay.style.opacity = 0;
};
iframe.onerror = () => {
// 可以在此处理错误情况
console.error('Error loading iframe content.');
};
在这个示例中,.loading-overlay
会在iframe内容加载时显示。一旦内容加载完毕(onload
事件触发),会通过设置CSS的opacity
属性为0来隐藏加载动画。如果内容加载失败(onerror
事件触发),可以添加错误处理代码。
评论已关闭