在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当src属性对应的主路径加载失败的时候,图片可以马上切换到备选路径。这样,即使主路径失效了,显示备用路径也不会影响网页的正常体验。

注意到网页中一张图片加载失败会触发error事件,因此可以使用DOM模型中的load和error事件实现这一效果。

  1. src1='main/image.jpg' //主路径
  2. src2='another/image.jpg' //备用路径

jQuery 1.8以前

使用load和error方法捕捉事件

  1. $('#imgMap' ).attr("src",src1).load(function(){console.log("图片加载成功")
  2. }).error(function(){
  3. console.log("图片加载失败,切换路径")
  4. $('#imgMap').attr('src',src2)
  5. });

jQuery 1.8

由于jQuery1.8之后load()方法和error()方法已经废弃了,因此可以使用bind方法绑定事件

  1. $('#img').attr("src",src1).bind( "load", function() {
  2. console.log("图片加载成功")
  3. }).bind("error",function(){
  4. console.log("图片加载失败,切换路径")
  5. $('#img').attr('src',src2)
  6. });

jQuery 3.0

jQuery3.0以后,统一使用on方法捕获事件

  1. $('#img').attr("src",src1).on( "load", function() {
  2. console.log("图片加载成功")
  3. }).on("error",function(){
  4. console.log("图片加载失败,切换路径")
  5. $('#img').attr('src',src2)
  6. });

JavaScript

不想使用jQuery插件时,也可以调用JavaScript原生方法。使用addEventListener方法监听事件。

  1. var Image = document.getElementById('img');
  2. Image.src=src1;
  3. Image.addEventListener('load', function(event) {
  4. console.log("图片加载成功")
  5. });
  6. Image.addEventListener('error', function(event) {
  7. console.log("图片加载失败,切换路径")
  8. Image.src=src2;
  9. });

(完)

使用JavaScript为一张图片设置备选路径的更多相关文章

  1. Javascript 将图片的绝对路径转换为base64编码

    Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var i ...

  2. YourSQLDba设置共享路径备份

    YourSQLDba可以将数据库备份到网络路径(共享路径),这个也是非常灵活的一个功能,以前一直没有使用过这个功能,最近由于一个需求,于是我测试了一下YourSQLDba备份到网络路径,中间遇到了一些 ...

  3. InstallShield打包设置相对路径

    InstallShield打包设置相对路径 在使用Installshield 打包安装文件时,添加打包文件时默认使用绝对路径,但是工程文件转移时(复制到其它位置时)编译时就会找不到安装文件,这样很不方 ...

  4. android adt自带eclipse无法设置ndk路径(找不到NDK配置)

    分步阅读 到android sdk官网下载r23版本的adt时自带的eclipse没有设置ndk路径的地方,通过Install New Software 发现无法更新,那么如何解决这个问题呢? 方便他 ...

  5. skyline TerraExplorer fly设置相对路径的方法

    软件环境:TerraExplorer Pro(以下简称TEP)6.5 在TEP中,对于本地(非网络)文件路径,默认都是绝对路径,在移动数据时非常麻烦,以下是本人总结出一些设置相对路径的规则 假设fly ...

  6. Eclipse无法设置NDK路径的解决方法

    如果在Eclipse中设置NDK路径的时候遇到下面的情况(尼玛,我的NDK设置呢?): 可以参考百度经验解决:http://jingyan.baidu.com/article/4d58d5413000 ...

  7. Apache为mysql以及自己的项目设置虚拟路径

    参考 http://www.120xcjl.com  Apache为mysql以及自己的项目设置虚拟路径 1.Apache2.2\conf\httpd.conf中释放: Include conf/ex ...

  8. log4j2.xml日志文件设置文件路径

    笔者最近的项目里使用了spring,spring通过web.xml配置监听器,在web启动时web.root系统变量,以供其他变量使用,例如 在属性文件里使用${web.root}以取得完整路径,项目 ...

  9. C#动态设置webServer路径

    using BD.SD_BJXYZY_PRO.WsbxService;using System;using System.Collections.Generic;using System.Linq;u ...

随机推荐

  1. Azkaban源码学习笔记

    1. ConnectorParams (interface): 定义了各种常量参数,没有声明任何方法. 2. ExecutorServlet.java类   2.1 继承类HttpServlet和接口 ...

  2. Android UI体验之全屏沉浸式透明状态栏效果

    前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...

  3. 从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)

    从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...

  4. .NET Core全新路线图

    .NET Core / ASP.NET Core 1 RTM发布两周后,社区也很积极,收到了非常多的反馈,上周五微软的scott Hunter 在dotnet团队官方博客上发布了.NET Core全新 ...

  5. XStream将java对象转换为xml时,对象字段中的下划线“_”,转换后变成了两个的解决办法

            在前几天的一个项目中,由于数据库字段的命名原因 其中有两项:一项叫做"市场价格"一项叫做"商店价格" 为了便于区分,遂分别将其命名为market ...

  6. 【SQLServer】记一次数据迁移-标识重复的简单处理

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 今天在数据迁移的时候因为手贱遇到一个坑爹问题,发来大家乐乐,也传授新手点经验 迁移惯用就 ...

  7. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  8. JavaScript常见的五种数组去重的方式

    ▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 先来建立一个数组 var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN ...

  9. mac下安装及配置tomcat

    mac下的软件不像windows下的程序那样写注册表,对于tomcat的安装来说,在mac下是名符其实的绿色软件,具体操作如下: 1.到 apache官方主页 下载完整 tar.gz文件包.(没有专门 ...

  10. 现代3D图形编程学习-基础简介(3)-什么是opengl (译)

    本书系列 现代3D图形编程学习 OpenGL是什么 在我们编写openGL程序之前,我们首先需要知道什么是OpenGL. 将OpenGL作为一个API OpenGL 通常被认为是应用程序接口(API) ...