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

IE浏览器中图片onload事件无效的解决方法_javascript技巧

php中文网
发布： 2016-05-16 16:50:48
原创
1271人浏览过

故事模式实现是只加载当前浏览的照片和它下面的两张照片，加载照片的时候才会加载和渲染评论区，图片没有加载前会用一个一象素的图片占位，并用一个loading类将显示出一个loading背景图，判断在可视区的时候替换成真正的图片，图片加载成功后删除loading类。

问题出在最后面，测试的时候发现在IE下loading类无法删除,当时代码如下：

复制代码 代码如下:

img.src = _src;
img.src = _src;
img.onload = function(){
   _con.delClass('loading');
}

网上找了一番，onload和定义src的语句应该换一下顺序，IE从缓存中取图片，onload根本不触发，opera也有这个毛病，正确代码修改如下
复制代码 代码如下:

img.onload = function(){
   _con.delClass('loading');
};
img.src = _src;

立即就正常了


结论：应该把onload写到src前面，先告诉浏览器图片加载完要怎么处理，再让它去加载图片。 所以，不是IE浏览器不会触发onload事件，而是因为加载缓冲区的速度太快，在没有告诉它加载完要怎么办时，它已经加载完了。反过来说，firefox明显更智能一些，加入onload事件后，firefox浏览器会检测缓冲区是否已经有此图片，有的话直接就触发此事件！

Creatext AI
Creatext AI

专为销售人员提供的 AI 咨询辅助工具

Creatext AI 39
查看详情 Creatext AI
相关标签：
js

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JS图片自动轮换效果实现思路附截图_javascript技巧 下一篇：jquery form 隐藏的input 选择_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript参数传递_值引用机制 JavaScript函数传参是按值传递引用。基本类型传递值的副本，修改不影响原变量；对象类型传递引用地址的副本，可修改对象属性但重新赋值参数不影响原引用。
2025-11-30 18:34:02
333
JavaScript编码规范_Airbnb风格指南 AirbnbJavaScript风格指南推荐使用const和let替代var，字符串用单引号，优先采用箭头函数、解构赋值和ES6模块语法，要求两个空格缩进、关键字后加空格并始终显式添加分号，以提升代码可读性与一致性。
2025-11-30 18:34:02
784
模块解析：Node.js中的require机制剖析 Node.js的require机制是模块化开发的核心，遵循CommonJS规范，支持核心模块、路径模块和第三方模块的加载；按优先级顺序查找模块，未指定扩展名时依次尝试.js、.json、.node；加载后缓存于require.cache，避免重复执行，提升性能；每个模块被包裹在函数闭包中，拥有独立作用域，通过exports导出内容，支持动态加载但同步特性可能影响启动速度；相比ES6的import需配置启用，require仍广泛用于现有项目。
2025-11-30 18:32:02
966
JavaScript物理模拟_刚体运动与碰撞检测 刚体运动通过牛顿力学公式更新位置与速度，结合重力、摩擦力等受力计算；碰撞检测常用AABB判断矩形碰撞，通过圆心距与半径和比较判断圆形碰撞，实现JavaScript物理模拟。
2025-11-30 18:31:02
428
JavaScript网络请求_Axios拦截器与适配器原理 Axios通过拦截器和适配器实现请求的灵活处理与跨平台支持。拦截器基于Promise链式调用，按顺序执行请求/响应的预处理；适配器根据环境自动选择底层HTTP实现，如浏览器的XMLHttpRequest或Node.js的http模块，二者协同完成网络请求的统一管理与定制化扩展。
2025-11-30 18:28:02
173
JavaScript游戏开发_物理引擎与碰撞检测 物理引擎如Matter.js可模拟重力、碰撞等真实物理效果，结合AABB或圆形碰撞检测实现精准交互；通过监听碰撞事件可自定义游戏逻辑，如角色踩踏击杀敌人；小型项目可用简单检测方法，复杂场景推荐成熟引擎以保证性能与手感。
2025-11-30 18:26:02
142
机器学习基础_javascript智能应用 JavaScript可通过TensorFlow.js、Brain.js等库在前端实现机器学习，适用于图像识别、情感分析等场景，以ML5.js入门更简单，通常采用前端推理、后端训练的协同模式，在保证低延迟和隐私的同时需权衡模型体积与设备性能。
2025-11-30 18:24:07
312
JavaScriptWeb组件_CustomElementsAPI CustomElementsAPI允许开发者定义自定义HTML标签并赋予其行为与结构，通过customElements.define()注册，支持自主元素（如）和基于原生元素扩展的内置元素（如），结合生命周期回调（connectedCallback、attributeChangedCallback等）实现组件逻辑控制，配合ShadowDOM可达成样式隔离，适用于构建高复用、轻量级、原生封装的UI组件库。
2025-11-30 18:19:07
524
JavaScript知识图谱_概念关系与学习路径规划 JavaScript知识图谱的核心是系统掌握语言基础、运行机制、现代语法与生态工具。从变量声明、数据类型等语法入手，理解执行上下文、闭包、原型链与事件循环等核心机制，继而学习ES6+的箭头函数、模块化、class与async/await，最后通过npm、Webpack、React/Vue、Node.js等生态工具实现全栈开发能力，形成由浅入深、前后呼应的完整体系。
2025-11-30 18:19:02
756
JavaScript框架原理_VueReact内部机制解析 Vue通过响应式系统自动追踪依赖，数据变化驱动视图更新；React则依赖手动状态更新与虚拟DOM比对，由开发者触发渲染。
2025-11-30 18:17:02
113
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部