使用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为一张图片设置备选路径的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
JS取得绝对路径的实现代码
在项目中,我们经常要得到项目的绝对路径,方便我们上传下载文件,JS为我们提供了方法,虽说要迂回一下.代码如下: function getRealPath(){ //获取当前网址,如: http://localhost:8083/myproj/view/my.jsp var curWwwPath=window.document.location.href; //获取主机地址之后的目录,如: myproj/view/my.jsp var pathName=window.document.locati
-
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
项目需求:如何通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端 题主用jquery接收 <input name="c_pic" id="c_pic" type="file" class="file"> 用的方法是: var input = document.getElementById("c_pic"); input.addEventListener('chang
-
JS获取input file绝对路径的方法(推荐)
最近因需要上传文件到oracle blob里, 在获取文件路径的遇到些问题,由于安全原因,新版的浏览器都不支持直接获取本地URL,在网上找了些方法,如下: <script type="text/javascript"> //FX获取文件路径方法 function readFileFirefox(fileBrowser) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPCo
-
浅谈NodeJS中require路径问题
项目需要用nodejs,感觉nodejs是前端装逼神器了,是通向全栈工程师的必经之路哇,接下来开始踏上学习nodejs的征程.下面是第一个hello,world的程序. 1.server.js文件,这相当于服务器脚本. var http = require("http"); function start() { function onRequest(request, response) { console.log("Request recieved") respon
-
JavaScript获取当前url根目录(路径)
主要用到Location 对象,包含有关当前 URL 的信息,是 Window 对象的一个部分,可通过 window.location 属性来访问. 方法一 (window.document.location.href/window.document.location.pathname) ------------转自网络 function getRootPath_web() { //获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp
-
js获取上传文件的绝对路径实现方法
在html中 <input type="file" id="importFile" /> <input type="button" onclick="upload()"/> <script> function upload() { var filename = document.getElementById("importFile").value; // 这时的filen
-
使用JavaScript为一张图片设置备选路径的方法
在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当src属性对应的主路径加载失败的时候,图片可以马上切换到备选路径.这样,即使主路径失效了,显示备用路径也不会影响网页的正常体验. 注意到网页中一张图片加载失败会触发error事件,因此可以使用DOM模型中的load和error事件实现这一效果. src1='main/image.jpg' //主路径 src2='another/image.jpg' //备用路径 jQuery 1.8以前 使用load和error方法捕捉事件 $('#i
-
使用WingPro 7 设置Python路径的方法
Python使用称为Python Path的搜索路径来查找使用import语句导入代码的模块.大多数代码只会汇入已经默认路径上的模块,通过安装到Python的Python标准库的例子模块或模块点子,pipenv,畅达,或一些其他的包管理器.但是,在某些情况下,代码将依赖于通过在启动Python之前设置环境变量PYTHONPATH提供的不同路径,或者 在导入模块之前在运行时修改sys.path. 软件地址:https://www.macdown.com/mac/3816.html 如果通过其中一种
-
DLL加载设置相对路径的方法
DLL加载,设置相对路径的方法如下所示: 1. 加载dll方法之一:(./ 代表当前目录,../ 代表上层目录)包含头文件的相对路径(当前路径为源代码路径,路径 "../../" 当前项目文件夹上级目录),链接lib文件的相对路径(当前项目文件夹里"..\\",这里需要转意字符\).如果项目1依赖项目2(鼠标右键点击项目1,点击项目依赖,勾选依赖项目2),这样在构建项目1时,会自动先构建项目1:而且项目2构建的内容也会在当前项目1的Debug中.导出dll文件:可用
-
react如何快速设置文件路径别名
React是用于构建用户界面的JavaScript库, 起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript MVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagra
-
javaScript 读取和设置文档元素的样式属性
首先我们先说一下样式表属性 1. 内联样式即元素style属性里面设置的,级别最高 2. 页面样式表定义即页面<style></style>里面定义的,级别次之 3.外部链接样式表文件 JavaScript获取和设置文档元素的css属性: 1.获取元素Style属性里面设置的样式属性, document.getElementById(id).style.height; 有,则返回属性值:没有则返回空 IE和火狐皆然,只是有的属性值返回可能不一样,比如像颜色火狐返回rgb,而IE是返
-
使用Chrome调试JavaScript的断点设置和调试技巧
你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的各
-
Javascript实现获取及设置光标位置的方法
本文实例讲述了Javascript实现获取及设置光标位置的方法.分享给大家供大家参考.具体如下: 在项目开发中经常遇到input等设置光标位置到最后的问题,今天我查了一下Google,找到了在IE.Firefox.Opera等主流浏览器的获取光标位置(getCursortPosition)以及设置光标位置(setCursorPosition)的函数. 1. 获取光标位置函数: function getCursortPosition (ctrl) { var CaretPos = 0; // IE
-
javascript为按钮注册回车事件(设置默认按钮)的方法
本文实例讲述了javascript为按钮注册回车事件(设置默认按钮)的方法.分享给大家供大家参考.具体如下: 首先不得不说,在JS方面,自己真的是个不折不扣的菜鸟.对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得.今天先来点开胃的,说一下如何设置一个默认按钮,就是不管焦点在不在按钮上,只要按下回车,就等于触发了按钮的单击事件. 代码非常简单,要完成这个功能,只需几行代码: //为keyListene
-
Android开发之将两张图片合并为一张图片的方法
本文实例讲述了Android开发之将两张图片合并为一张图片的方法.分享给大家供大家参考,具体如下: 主要操作代码如下: private Bitmap mergeBitmap(Bitmap firstBitmap, Bitmap secondBitmap) { Bitmap bitmap = Bitmap.createBitmap(firstBitmap.getWidth(), firstBitmap.getHeight(),firstBitmap.getConfig()); Canvas can
-
javascript系统时间设置操作示例
本文实例讲述了javascript系统时间设置操作.分享给大家供大家参考,具体如下: <script> //myTime typeof //object window.onload = function() { var obody = document.body; //设置一个定时器,每过一秒钟,自动加一秒 setInterval(fnTime, 1000) //如果不执行这个函数,第一次打开时,会过一秒钟才出来 fnTime(); function fnTime() { var myTime
随机推荐
- JavaBean(EJB) 3.0 全新体验
- Nginx泛解析到子目录后自动判断有无public目录详解
- cmd ren命令 重命名文件(夹)
- PHP函数eval()介绍和使用示例
- thinkPHP5.0框架配置格式、加载解析与读取方法
- 关于js拖拽上传 [一个拖拽上传修改头像的流程]
- C++ 基数排序的实现实例代码
- 字符串长度函数strlen和mb_strlen的区别示例介绍
- CSS 浏览器的等宽空格问题解决
- 微信小程序表单验证错误提示效果
- jQuery打印指定区域Html页面并自动分页
- 基于jquery的web页面日期格式化插件
- javascript五图轮播切换实用版
- Java 基础之内部类详解及实例
- bootstrap 设置checkbox部分选中效果
- PHP中使用Imagick实现各种图片效果实例
- 使用PHP实现密保卡功能实现代码<打包下载直接运行>
- SpringBoot 中常用注解及各种注解作用
- 浅谈SpringBoot之事务处理机制
- 详解Centos7扩展磁盘空间(LVM管理)