一个简单的载入图片等待状态的Loading代码
Javascript教程
一个简单的载入图片等待状态的Loading代码 - ><br>
<script><br>
function aaa() {<br>
document.getElementById('aa').innerHTML = '';<br>
}<br>
</script><br>
<div style="margin:300px 0px 0px 300px;"><br>
<div id="aa" style="margin-bottom:-30px;">载入中……</div><br>
<div><img src="</p>
</div>
<div class="lastanext flexRow">
<a class="lastart flexRow" href="/wz/12503.html" ><span>上一篇：</span><span>Flash与HTML 5 WebGL粒子系统性能比较</span></a>
<a class="nextart flexRow" href="/wz/12505.html" ><span>下一篇：</span><span>简单也丰富 简洁网页设计视觉呈现技巧</span></a>
</div>
</div>
<div class="dtl-xgtj">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>相关推荐</p></div>
</div>
<div class="tjlist flexRow">
<div class="tj-item ">
<div class="tjitemd">
<div class="tjimd-top flexRow">
<a class="imdta flexRow" href="/wz/336755.html" >
<img src="https://images.jiaoben.net/uploads/20260328/logo_69c71d1dede3a1.jpeg" >
</a>
<div class="imdt-right flexColumn">
<a class="imdtra flexRow overflowclass" href="/wz/336755.html" >v0.dev 支持 RSC 了！AI 生成全栈组件离我们还有多远？</a>
<a class="imdtrap flexRow overflowclass" href="/wz/336755.html" >
如果你最近还在把 Vercel 的 v0.dev 当作一个单纯的“Tailwind 代码生成器”或者“UI 画板”，那你可能要重新审视这个工具了。
</a>
</div>
</div>
<div class="tjimd-down flexRow">
<div class="imdd-tab flexRow">
<p class="imddt-time flexRow"><b></b><span>2026-03-28</span></p>
</div>
<a href="/wz/336755.html" class="imdd-more flexRow flexcenter" >立即查看</a>
</div>
</div>
</div>
<div class="tj-item ">
<div class="tjitemd">
<div class="tjimd-top flexRow">
<a class="imdta flexRow" href="/wz/336754.html" >
<img src="https://images.jiaoben.net/uploads/20260328/logo_69c71d187d0f51.jpeg" >
</a>
<div class="imdt-right flexColumn">
<a class="imdtra flexRow overflowclass" href="/wz/336754.html" >VTJ.PRO 在线应用开发平台概览</a>
<a class="imdtrap flexRow overflowclass" href="/wz/336754.html" >
VTJ.PRO 平台概览 目的与范围 VTJ.PRO 是一个 AI 驱动的低代码应用开发平台，在浏览器中提供功能完整的在线集成开发环境 (IDE)。它将可视化设计、AI 辅助代码生成和多平台输出（We
</a>
</div>
</div>
<div class="tjimd-down flexRow">
<div class="imdd-tab flexRow">
<p class="imddt-time flexRow"><b></b><span>2026-03-28</span></p>
</div>
<a href="/wz/336754.html" class="imdd-more flexRow flexcenter" >立即查看</a>
</div>
</div>
</div>
<div class="tj-item ">
<div class="tjitemd">
<div class="tjimd-top flexRow">
<a class="imdta flexRow" href="/wz/336753.html" >
<img src="https://images.jiaoben.net/uploads/20260328/logo_69c71d12f2ee21.jpeg" >
</a>
<div class="imdt-right flexColumn">
<a class="imdtra flexRow overflowclass" href="/wz/336753.html" >VUE-组件命名与注册机制</a>
<a class="imdtrap flexRow overflowclass" href="/wz/336753.html" >
Vue2 组件四个"名字"，我曾经傻傻分不清楚 先说我当时有多懵 我第一次看到一个 Vue 组件的使用方式时，脑袋是懵的： 四个地方，都像是在说同一件事，又感觉哪里不对。 它们到底是什么关系？ ? 直
</a>
</div>
</div>
<div class="tjimd-down flexRow">
<div class="imdd-tab flexRow">
<p class="imddt-time flexRow"><b></b><span>2026-03-28</span></p>
</div>
<a href="/wz/336753.html" class="imdd-more flexRow flexcenter" >立即查看</a>
</div>
</div>
</div>
<div class="tj-item ">
<div class="tjitemd">
<div class="tjimd-top flexRow">
<a class="imdta flexRow" href="/wz/336752.html" >
<img src="https://images.jiaoben.net/uploads/20260328/logo_69c71866dea691.jpeg" >
</a>
<div class="imdt-right flexColumn">
<a class="imdtra flexRow overflowclass" href="/wz/336752.html" >Vue生命周期与keep-alive实战理解</a>
<a class="imdtrap flexRow overflowclass" href="/wz/336752.html" >
Vue 生命周期与 keep-alive：我用真实项目终于搞清楚了 先说一个语言上的误导 "生命周期" 这个词，听起来像是整个项目从打开到关闭的一段大流程。 但实际上，它属于每一个组件。 正确的理解是
</a>
</div>
</div>
<div class="tjimd-down flexRow">
<div class="imdd-tab flexRow">
<p class="imddt-time flexRow"><b></b><span>2026-03-28</span></p>
</div>
<a href="/wz/336752.html" class="imdd-more flexRow flexcenter" >立即查看</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cd-right dtlcd-right">
<div class="dtl-ht">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>专题</p></div>
</div>
<div class="dtlht-list ">
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-50161.html" >#Grok</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-50161.html" >Grok脚本资源网站，提供G</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="50161" >+ 收藏</p>
</div>
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-50160.html" >#Sora2</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-50160.html" >Sora2脚本资源网站，提供S</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="50160" >+ 收藏</p>
</div>
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-50159.html" >#通义万相</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-50159.html" >通义万相脚本资源网站，提供通</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="50159" >+ 收藏</p>
</div>
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-50158.html" >#海螺AI</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-50158.html" >海螺AI脚本资源网站，提供海</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="50158" >+ 收藏</p>
</div>
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-50157.html" >#可灵AI</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-50157.html" >可灵AI脚本资源网站，提供可</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="50157" >+ 收藏</p>
</div>
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-50156.html" >#Kling3.0</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-50156.html" >Kling3.0脚本资源网站，提</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="50156" >+ 收藏</p>
</div>
</div>
</div>
<div class=" dtl-zt">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>最新数据</p></div>
</div>
<div class="wkch-downs">
<div class="weekch-top flexRow">
<a class="wktpa flexRow" href="/wz/12510.html" >
<img src="/jiaoben/image/noimg.png" >
</a>
<div class="wktpa-right flexColumn">
<a class="wktpara flexRow overflowclass" href="/wz/12510.html" >Windows 7彻底卸载IE 8浏览器有门道</a>
<a class="wktparp flexRow overflowclass" href="/wz/12510.html" >
据国外媒体报道，Window
</a>
</div>
</div>
<div class="weekch-list">
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/12509.html" class="weekcha flexRow flexcenter overflowclass" >JavaScript框架比较:DOM遍历</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/12508.html" class="weekcha flexRow flexcenter overflowclass" >Windows 7 默认字体一招轻松还原</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/12507.html" class="weekcha flexRow flexcenter overflowclass" >重构中的模块化设计:样式的作用域</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/12506.html" class="weekcha flexRow flexcenter overflowclass" >Windows 7出现“黑屏”的紧急处理</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/12502.html" class="weekcha flexRow flexcenter overflowclass" >如何有效创建个性化404错误页面</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/12501.html" class="weekcha flexRow flexcenter overflowclass" >JavaScript框架比较:选择器</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/12500.html" class="weekcha flexRow flexcenter overflowclass" >jQuery打造动态下滑菜单</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/12478.html" class="weekcha flexRow flexcenter overflowclass" >Windows 7/Windows Server 2008 R2 Service Pack 1 泄露版</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/12477.html" class="weekcha flexRow flexcenter overflowclass" >国内首曝：Windows7 SP1 Beta 截图</a>
</div>
</div>
</div>
</div>
<div class=" dtl-wz">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>相关文章</p></div>
</div>
<div class="blog-list">
<a href="/wz/336426.html" class="bloga flexRow over"><p class="overflowclass">最新版vue3+TypeScript开发入门到实战教程之路由详解二</p><div class="blogtime"><span>03/</span>28</div></a>
<a href="/wz/336428.html" class="bloga flexRow over"><p class="overflowclass">src-components调用链与即时聊天组件树</p><div class="blogtime"><span>03/</span>28</div></a>
<a href="/wz/336429.html" class="bloga flexRow over"><p class="overflowclass">从0开始设计一个树和扁平数组的双向同步方案</p><div class="blogtime"><span>03/</span>28</div></a>
<a href="/wz/336591.html" class="bloga flexRow over"><p class="overflowclass">拒绝 rem 计算！Vue3 大屏适配，我用 vfit 一行代码搞定</p><div class="blogtime"><span>03/</span>28</div></a>
<a href="/wz/336592.html" class="bloga flexRow over"><p class="overflowclass">Home双router-view与布局切换逻辑</p><div class="blogtime"><span>03/</span>28</div></a>
<a href="/wz/336595.html" class="bloga flexRow over"><p class="overflowclass">uniapp uview-plus 自定义动态验证</p><div class="blogtime"><span>03/</span>28</div></a>
<a href="/wz/336596.html" class="bloga flexRow over"><p class="overflowclass">Vue3 单元测试实战：从组合式函数到组件</p><div class="blogtime"><span>03/</span>28</div></a>
<a href="/wz/336753.html" class="bloga flexRow over"><p class="overflowclass">VUE-组件命名与注册机制</p><div class="blogtime"><span>03/</span>28</div></a>
<a href="/wz/336754.html" class="bloga flexRow over"><p class="overflowclass">VTJ.PRO 在线应用开发平台概览</p><div class="blogtime"><span>03/</span>28</div></a>
<a href="/wz/336755.html" class="bloga flexRow over"><p class="overflowclass">v0.dev 支持 RSC 了！AI 生成全栈组件离我们还有多远？</p><div class="blogtime"><span>03/</span>28</div></a>
</div>
</div>
<div class="cdr-ai">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>AI精选 </p></div>
<a class="jbtitle-more flexRow" href="/category/list_344_1.html" title=""><span>更多</span><b></b></a>
</div>
<div class="ai-list">
<div class="ail-top flexRow">
<a href="/wz/338861.html" title="" class="ailta ">
<img src="https://images.jiaoben.net/uploads/20260330/logo_69ca6dbe5ca4c1.jpeg" >
<p ><span>MCP 协议深度解析：构建 A</span></p></a>
<a href="/wz/338859.html" title="" class="ailta ">
<img src="https://images.jiaoben.net/uploads/20260330/logo_69ca6db7dd5131.jpeg" >
<p ><span>OpenClaw 真正的效率开</span></p></a>
</div>
<div class="ail-down">
<a class="ali-con flexRow" href="/wz/338843.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">Anthropic 的 Harness 启示：当 AI Agent 开始「长跑」，架构才是真正的天花板</p>
</a>
<a class="ali-con flexRow" href="/wz/338751.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">AI Agent 智能体 - Multi-Agent 架构入门</p>
</a>
<a class="ali-con flexRow" href="/wz/338691.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">RAG 不一定非得靠向量库：一套更偏工程落地的“结构化推理检索”方案</p>
</a>
<a class="ali-con flexRow" href="/wz/338690.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">一文搞懂深度学习中的池化！</p>
</a>
<a class="ali-con flexRow" href="/wz/338689.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">一文搞懂卷积神经网络经典架构-LeNet</p>
</a>
<a class="ali-con flexRow" href="/wz/338460.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">告别 Vibe Coding：用 SDD 让 AI 编程提效 50%，三工具实战对比</p>
</a>
<a class="ali-con flexRow" href="/wz/338458.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">Agent 语音交互如何更稳、更快？一次高并发消息链路优化实践</p>
</a>
<a class="ali-con flexRow" href="/wz/338457.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass"># AI 终于能"干活"了——Function Calling 完全指南</p>
</a>
</div>
</div>
</div>
<div class="cdr-blog">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>脚本推荐</p></div>
</div>
<div class="blog-list">
<a href="/wz/zt-49225.html" title="" class="bloga flexRow over"><p class="overflowclass">SeeDance 2.0 Video Creator专区</p></a>
<a href="/wz/zt-49224.html" title="" class="bloga flexRow over"><p class="overflowclass">OpenClaw AI专区</p></a>
<a href="/wz/zt-49223.html" title="" class="bloga flexRow over"><p class="overflowclass">cowork专区</p></a>
<a href="/wz/zt-49222.html" title="" class="bloga flexRow over"><p class="overflowclass">claude code skills专区</p></a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
$(function() {
// “+ 收藏”按钮点击事件
$(document).on('click', '.htmitem-right, .ztop-right', function(e) {
// 仅针对包含 “+ 收藏” 文字的按钮
if ($(this).text().indexOf('+ 收藏') === -1) return;
e.preventDefault();
const id = $(this).data('id');
if (!id) {
layer.msg('该项暂无有效ID，无法收藏');
return;
}
// 构造收藏 URL: 当前域名 + /wz/zt- + id + /
const bookmarkUrl = window.location.origin + '/wz/zt-' + id + '.html';
// 获取收藏标题 (优先从同级元素获取话题名称，否则使用页面标题)
let bookmarkTitle = $(this).closest('.htl-item, .zttopd').find('a:first, span.overflowclass').text().trim() || document.title;
if (bookmarkTitle.startsWith('#')) bookmarkTitle = bookmarkTitle.substring(1);
// 浏览器收藏逻辑 (带 Fallback)
try {
if (window.sidebar && window.sidebar.addPanel) {
// Firefox < 23
window.sidebar.addPanel(bookmarkTitle, bookmarkUrl, "");
} else if (window.external && ('AddFavorite' in window.external)) {
// IE
window.external.AddFavorite(bookmarkUrl, bookmarkTitle);
} else {
// Chrome, Safari, Firefox 23+, etc.
const isMac = /Mac/i.test(navigator.userAgent);
const keyStr = isMac ? 'Command + D' : 'Ctrl + D';
layer.confirm('由于浏览器安全限制，请使用 <b>' + keyStr + '</b> 手动添加收藏。<br><br>收藏地址：<br><small>' + bookmarkUrl + '</small>', {
title: '收藏提示',
btn: ['复制链接', '知道了'],
yes: function(index) {
copyToClipboard(bookmarkUrl).then(() => {
layer.msg('链接已复制，请手动添加到收藏夹');
}).catch(() => {
layer.msg('复制失败，请手动选择复制');
});
layer.close(index);
}
});
}
} catch (err) {
layer.msg('收藏失败，请手动添加');
}
});
// 兼容非 HTTPS 的复制函数
function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
} else {
let textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
document.execCommand('copy') ? res() : rej();
textArea.remove();
});
}
}
});
</script>
<footer>
<div class="foot ">
<div class="foot-top flexRow">
<div class="foot-left">
<div class="ftl-top flexRow"><span class="flexRow flexcenter">脚本</span>在线</div>
<p class="ftl-down">
智能赋能梦想，脚本构筑现实。我们致力于链接AI智能指令
与传统自动化，为您提供一站式、高效率的脚 本资产与生成
服务。
</p>
</div>
<div class="foot-right flexRow">
<div class="ftr-list flexColumn">
<p>核心板块</p>
<span>AI脚本库</span>
<span>自动化仓库</span>
<span>脚本实验室</span>
</div>
<div class="ftr-list flexColumn">
<p>关于我们</p>
<a href="/category/list_229_1.html" >最新游戏</a>
<span>商务合作</span>
<span>隐私政策</span>
</div>
<div class="ftr-list flexColumn">
<p>社区支持</p>
<span >API文档</span>
<a href="/category/list_334_1.html" >攻略资讯</a>
<span>违规举报</span>
</div>
</div>
</div>
<div class="foot-down flexColumn">
<p>© 2026 jiaoben.net | 脚本在线 | 联系：jiaobennet2026@163.com</p>
<p>备案：<a style="color: #7F7F7F;" href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备18025217号-11</a> </p>
</div>
</div>
</footer>
</body>
</html> 
