发布于 2017-05-13 10:35:27 | 150 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

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网站的支持!



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务