这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当 src 属性对应的主路径加载失败的时候,图片可以马上切换到备选路径,怎么实现呢? 下面通过本文给大家分享 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 为一张图片设置备选路径的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0513/328921.html