使用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 相关文章推荐
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
微信小程序 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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
小程序实现tab标签页
2020/11/16 Javascript
解读python如何实现决策树算法
2018/10/11 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
微观世界观后感
2015/06/10 职场文书
高三生物教学反思
2016/02/22 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技