使用JavaScript为一张图片设置备选路径
在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当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 将图片的绝对路径转换为base64编码
Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var i ...
- YourSQLDba设置共享路径备份
YourSQLDba可以将数据库备份到网络路径(共享路径),这个也是非常灵活的一个功能,以前一直没有使用过这个功能,最近由于一个需求,于是我测试了一下YourSQLDba备份到网络路径,中间遇到了一些 ...
- InstallShield打包设置相对路径
InstallShield打包设置相对路径 在使用Installshield 打包安装文件时,添加打包文件时默认使用绝对路径,但是工程文件转移时(复制到其它位置时)编译时就会找不到安装文件,这样很不方 ...
- android adt自带eclipse无法设置ndk路径(找不到NDK配置)
分步阅读 到android sdk官网下载r23版本的adt时自带的eclipse没有设置ndk路径的地方,通过Install New Software 发现无法更新,那么如何解决这个问题呢? 方便他 ...
- skyline TerraExplorer fly设置相对路径的方法
软件环境:TerraExplorer Pro(以下简称TEP)6.5 在TEP中,对于本地(非网络)文件路径,默认都是绝对路径,在移动数据时非常麻烦,以下是本人总结出一些设置相对路径的规则 假设fly ...
- Eclipse无法设置NDK路径的解决方法
如果在Eclipse中设置NDK路径的时候遇到下面的情况(尼玛,我的NDK设置呢?): 可以参考百度经验解决:http://jingyan.baidu.com/article/4d58d5413000 ...
- Apache为mysql以及自己的项目设置虚拟路径
参考 http://www.120xcjl.com Apache为mysql以及自己的项目设置虚拟路径 1.Apache2.2\conf\httpd.conf中释放: Include conf/ex ...
- log4j2.xml日志文件设置文件路径
笔者最近的项目里使用了spring,spring通过web.xml配置监听器,在web启动时web.root系统变量,以供其他变量使用,例如 在属性文件里使用${web.root}以取得完整路径,项目 ...
- C#动态设置webServer路径
using BD.SD_BJXYZY_PRO.WsbxService;using System;using System.Collections.Generic;using System.Linq;u ...
随机推荐
- 操作系统篇-调用门与特权级(CPL、DPL和RPL)
|| 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.前言 在前两篇文章(<操作系统篇-浅谈实模式与保护模式>和<操作系统篇-分段机制与GDT|LDT>)中,我们提到 ...
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- 微信应用号(小程序)开发IDE配置(第一篇)
2016年9月22日凌晨,微信宣布“小程序”问世,当然只是开始内测了,微信公众平台对200个服务号发送了小程序内测邀请.那么什么是“小程序”呢,来看微信之父怎么说 看完之后,相信大家大概都有些明白了吧 ...
- CRL快速开发框架系列教程三(更新数据)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- 套用JQuery EasyUI列表显示数据、分页、查询
声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...
- 从display:run-in;中学习新技能
有时我们想在一行内显示一个标题,以及一段内容,虽然看起来比较简单,但是为了语义化用dl比较合适,但是它默认是block元素,改成inline?那么有多段呢?不就都跑上来了?用float?那问题也挺多. ...
- Windows API 设置窗口下控件Enable属性
参考页面: http://www.yuanjiaocheng.net/webapi/create-crud-api-1-put.html http://www.yuanjiaocheng.net/we ...
- Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory
学习架构探险,从零开始写Java Web框架时,在学习到springAOP时遇到一个异常: "C:\Program Files\Java\jdk1.7.0_40\bin\java" ...
- css中line-height行高的深入学习
之前对css中行高line-height的理解还是有些肤浅,深入后才发觉里面包罗万象.学习行高line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com ...
- Android中使用ExpandableListView实现微信通讯录界面(完善仿微信APP)
之前的博文<Android中使用ExpandableListView实现好友分组>我简单介绍了使用ExpandableListView实现简单的好友分组功能,今天我们针对之前的所做的仿微信 ...