使用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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 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
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
windows下python安装pip方法详解
2020/02/10 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
实习生自我鉴定
2013/12/12 职场文书
检举信的格式及范文
2014/04/04 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Python闭包的定义和使用方法
2022/04/11 Python