使用JavaScript为一张图片设置备选路径的方法

 更新时间:2017年01月04日 10:06:55   作者:赵小生z  
在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当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为一张图片设置备选路径的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • javascript实现前端分页功能

    javascript实现前端分页功能

    这篇文章主要为大家详细介绍了javascript实现前端分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • javascript实用小函数使用介绍

    javascript实用小函数使用介绍

    本文整理了一些实用小函数如阻止输入非数字,backspace除外;限制输入最大字符串长度等,需要的朋友可以了解下
    2013-11-11
  • js实现简易购物车功能

    js实现简易购物车功能

    这篇文章主要为大家详细介绍了js实现简易购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JS ES6中setTimeout函数的执行上下文示例

    JS ES6中setTimeout函数的执行上下文示例

    这篇文章主要给大家介绍了关于JS ES6中setTimeout函数的执行上下文的相关资料,文中给出了详细的介绍和示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-04-04
  • 仿YAHOO的一个小效果 下拉效果

    仿YAHOO的一个小效果 下拉效果

    [红色]仿YAHOO的一个小效果 下拉效果...
    2006-11-11
  • 8个有意思的JavaScript面试题

    8个有意思的JavaScript面试题

    JavaScript 是一种有趣的语言,我们都喜欢它,因为它的性质。这篇文章主要介绍了8个有意思的JavaScript面试题 ,需要的朋友可以参考下
    2019-07-07
  • DPlayer.js视频播放插件使用方法

    DPlayer.js视频播放插件使用方法

    这篇文章主要为大家详细介绍了JSx实现简单控制视频播放倍速,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript事件委托的技术原理探讨示例

    JavaScript事件委托的技术原理探讨示例

    使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上
    2014-04-04
  • js统计页面的来访次数实现代码

    js统计页面的来访次数实现代码

    这篇文章主要介绍了如何使用js统计页面的来访次数,需要的朋友可以参考下
    2014-05-05
  • JavaScrpt中如何使用 cookie 设置查看与删除功能

    JavaScrpt中如何使用 cookie 设置查看与删除功能

    这篇文章主要介绍了JavaScrpt中使用 cookie 设置查看与删除功能的方法,文中通过实例代码给大家介绍了js cookie常用的3个预设函数库,需要的朋友可以参考下
    2017-07-07

最新评论