使用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 ...
随机推荐
- Azkaban源码学习笔记
1. ConnectorParams (interface): 定义了各种常量参数,没有声明任何方法. 2. ExecutorServlet.java类 2.1 继承类HttpServlet和接口 ...
- Android UI体验之全屏沉浸式透明状态栏效果
前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...
- 从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)
从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...
- .NET Core全新路线图
.NET Core / ASP.NET Core 1 RTM发布两周后,社区也很积极,收到了非常多的反馈,上周五微软的scott Hunter 在dotnet团队官方博客上发布了.NET Core全新 ...
- XStream将java对象转换为xml时,对象字段中的下划线“_”,转换后变成了两个的解决办法
在前几天的一个项目中,由于数据库字段的命名原因 其中有两项:一项叫做"市场价格"一项叫做"商店价格" 为了便于区分,遂分别将其命名为market ...
- 【SQLServer】记一次数据迁移-标识重复的简单处理
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 今天在数据迁移的时候因为手贱遇到一个坑爹问题,发来大家乐乐,也传授新手点经验 迁移惯用就 ...
- CSS 选择器及各样式引用方式
Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...
- JavaScript常见的五种数组去重的方式
▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 先来建立一个数组 var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN ...
- mac下安装及配置tomcat
mac下的软件不像windows下的程序那样写注册表,对于tomcat的安装来说,在mac下是名符其实的绿色软件,具体操作如下: 1.到 apache官方主页 下载完整 tar.gz文件包.(没有专门 ...
- 现代3D图形编程学习-基础简介(3)-什么是opengl (译)
本书系列 现代3D图形编程学习 OpenGL是什么 在我们编写openGL程序之前,我们首先需要知道什么是OpenGL. 将OpenGL作为一个API OpenGL 通常被认为是应用程序接口(API) ...