使用JavaScript为一张图片设置备选路径的方法


Posted in Javascript onJanuary 04, 2017

在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当src属性对应的主路径加载失败的时候,图片可以马上切换到备选路径。这样,即使主路径失效了,显示备用路径也不会影响网页的正常体验。

注意到网页中一张图片加载失败会触发error事件,因此可以使用DOM模型中的load和error事件实现这一效果。

src1='main/image.jpg' //主路径
src2='another/image.jpg' //备用路径

jQuery 1.8以前

使用load和error方法捕捉事件

$('#imgMap' ).attr("src",src1).load(function(){console.log("图片加载成功")
        }).error(function(){
          console.log("图片加载失败,切换路径")
          $('#imgMap').attr('src',src2)    
        });

jQuery 1.8

由于jQuery1.8之后load()方法和error()方法已经废弃了,因此可以使用bind方法绑定事件

$('#img').attr("src",src1).bind( "load", function() {
 console.log("图片加载成功")
}).bind("error",function(){
  console.log("图片加载失败,切换路径")
      $('#img').attr('src',src2)  
});

jQuery 3.0

jQuery3.0以后,统一使用on方法捕获事件

$('#img').attr("src",src1).on( "load", function() {
 console.log("图片加载成功")
}).on("error",function(){
  console.log("图片加载失败,切换路径")
      $('#img').attr('src',src2)  
});

JavaScript

不想使用jQuery插件时,也可以调用JavaScript原生方法。使用addEventListener方法监听事件。

var Image = document.getElementById('img');
Image.src=src1;
Image.addEventListener('load', function(event) {
       console.log("图片加载成功")
});
Image.addEventListener('error', function(event) {
      console.log("图片加载失败,切换路径")
       Image.src=src2;
});

以上所述是小编给大家介绍的使用JavaScript为一张图片设置备选路径的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
jQuery 渐变下拉菜单
Dec 15 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 #Javascript
AngularJS入门示例之Hello World详解
Jan 04 #Javascript
详解AngularJS验证、过滤器、指令
Jan 04 #Javascript
Bootstrap3 图片(响应式图片&图片形状)
Jan 04 #Javascript
javascript 注释代码的几种方法总结
Jan 04 #Javascript
JS数组返回去重后数据的方法解析
Jan 03 #Javascript
js实现复选框的全选和取消全选效果
Jan 03 #Javascript
You might like
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python SocketServer源码深入解读
2019/09/17 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
美德少年事迹材料
2014/01/23 职场文书
志愿者服务感言
2014/02/27 职场文书
股权转让协议书
2014/04/12 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
应届大专生求职信
2014/06/26 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
MyBatis 动态SQL全面详解
2021/10/05 MySQL
python超详细实现完整学生成绩管理系统
2022/03/17 Python
基于Python实现nc批量转tif格式
2022/08/14 Python