使用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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
Ucren Virtual Desktop V2.0
Nov 07 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
使用js画图之画切线
Jan 12 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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
微信公众平台开发之配置与请求
2015/08/26 PHP
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Python实现的特征提取操作示例
2018/12/03 Python
用Python解决x的n次方问题
2019/02/08 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
如何写好建议书
2014/03/13 职场文书
中国梦读书活动总结
2014/07/10 职场文书
计生工作先进事迹
2014/08/15 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
门市房租房协议书
2014/12/04 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
李强感恩观后感
2015/06/17 职场文书
法定代表人身份证明书
2015/06/18 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
部门主管竞聘书
2015/09/15 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers