微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

JS对img标签进行优化使用onerror显示默认图像

高洛峰
发布： 2017-02-04 13:15:43
原创
1297人浏览过

对于网站图像的不显示有很多原因，网络问题，文件本身问题，文件ＵＲＬ问题等，而当图像加载失败时会触发onerror这个事件，我们利用这点，可以有效的避免图像加载失败的尴尬！ 

js代码 

//图像加载出错时的处理 
function errorImg(img) { 
img.src = "http://static.xuexiba.com/uploadfile//UserInfo/Avatar/201403/1303992393385832875324.jpg"; 
img.onerror = null; 
}
登录后复制

html代码 

<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />
登录后复制

页面效果

JS对img标签进行优化使用onerror显示默认图像

图像转图像AI
图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

图像转图像AI 65
查看详情 图像转图像AI

更多JS对img标签进行优化使用onerror显示默认图像相关文章请关注PHP中文网！

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：JavaScript也谈内存优化 下一篇：js性能优化 如何更快速加载你的JavaScript页面
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
提升Puppeteer脚本稳定性：解决动态页面元素点击失效问题 本文旨在解决Puppeteer在自动化过程中点击动态页面元素时遇到的可靠性问题。通过分析传统基于类名选择器的局限性，文章提出了一种更稳健的策略，即利用通用属性选择器结合element.evaluate(b=>b.click())方法进行元素交互。这种方法能更有效地模拟用户行为，确保脚本在面对频繁变化的页面结构时依然稳定可靠。
2025-11-10 22:07:01
527
JS数组如何查找元素_JavaScript数组findindexOf方法使用与区别 find()返回满足条件的元素，indexOf()返回元素索引；前者支持复杂条件适用于对象数组，后者仅严格匹配基础类型值。
2025-11-10 21:54:02
187
JavaScript异步请求的健壮性：实现网络请求重试机制 在JavaScript异步操作中，面对不稳定的网络环境，单一的fetch请求失败可能导致整个处理流程中断。本文将详细介绍如何通过实现一个自定义的重试机制来增强网络请求的健壮性，确保即使在遇到瞬时网络问题时，也能自动尝试重新发送请求，从而提升数据抓取或页面解析任务的完成率和稳定性。
2025-11-10 21:49:00
869
React中实现用户详情的按需显示与隐藏 本教程详细讲解如何在React应用中实现点击用户名时，仅显示对应用户的详细信息，并解决全局显示状态导致的所有卡片同时显示以及隐藏时出现边框的问题。通过引入局部状态管理和优化条件渲染逻辑，我们将构建一个高效且用户体验友好的组件交互方案。
2025-11-10 21:42:01
468
JavaScript代码分割与懒加载技术 代码分割与懒加载通过将JavaScript拆分为按需加载的模块，显著提升前端性能。使用动态import()可实现路由级（如React.lazy）和功能级（如异步加载图表库）的懒加载，结合webpackPrefetch等预获取提示优化用户体验，合理分割可减少首屏体积并降低初始加载耗时。
2025-11-10 21:35:22
147
JavaScript数据库操作与ORM框架深度使用 JavaScript通过Node.js实现后端数据库操作，原生SQL易引发安全与维护问题，ORM成为主流解决方案。Sequelize功能全面，支持模型定义、关联查询、事务与钩子机制，适合多数据库场景；Prisma以类型安全为核心，提供自动生成的类型化客户端，优化开发体验与类型推导。使用ORM需避免过度查询、警惕懒加载性能陷阱，并合理结合原始查询处理复杂逻辑。项目选型应综合考虑技术栈与规模，Sequelize成熟稳定，Prisma面向未来，掌握其SQL生成机制是性能优化关键。
2025-11-10 21:34:02
832
使用Web Components构建可复用组件_js前沿技术 WebComponents通过CustomElements、ShadowDOM和HTMLTemplates实现跨框架复用。CustomElements创建自定义标签，ShadowDOM隔离样式与结构，HTMLTemplates预定义内容并延迟渲染。结合connectedCallback和attributeChangedCallback可管理生命周期与响应属性变化，使用支持内容分发。组件可在React、Vue或纯HTML中直接使用，也可封装为npm包或CDN资源，实现设计系统统一与长期维护。
2025-11-10 21:33:28
604
js原型模式是什么 JavaScript原型模式通过prototype和__proto__实现对象间属性与方法的共享与继承。函数的prototype指向原型对象，实例的__proto__指向构造函数的prototype，形成原型链。访问属性时若实例中不存在，则沿原型链向上查找。将公共方法挂载到prototype上可避免重复定义，提升复用性与内存效率。如Person.prototype.sayHello定义一次即可被所有实例调用。原型链还支持继承，子类通过将prototype设为父类实例来继承属性方法，查找沿链向上直
2025-11-10 21:33:02
283
Web View访问令牌注入策略：postMessage与URL方案的比较与选择 本文深入探讨了在WebView中安全注入用户访问令牌的策略。重点比较了postMessageAPI与基于URL的方案（如会话URL或深度链接）。虽然postMessage在嵌入式WebView中可行，但文章指出，对于需要在系统浏览器或自定义Tab中打开的场景，基于URL的方法提供了更佳的开发者体验和更广泛的兼容性。文章将分析两种方法的优缺点、适用场景及安全考量，旨在为开发者提供明智的决策依据。
2025-11-10 21:20:16
903
动态内容中jQuery函数触发与事件委托教程 本文详细探讨了在动态加载内容场景下，如何确保jQuery函数（如字符截断和“阅读更多”功能）能够正确地应用于新添加的DOM元素。核心解决方案包括采用事件委托机制处理动态元素的点击事件，以及将内容生成与样式逻辑（如字符截断）紧密集成到JavaScript的DOM创建过程中，从而避免因DOM元素在$(document).ready()之后才出现而导致的函数失效问题。
2025-11-10 21:18:07
909
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部