jQuery图片加载失败替换默认图片方法汇总


Posted in jQuery onNovember 29, 2017

本文主要讨论页面中图片加载失败后替换默认图片的几种方式

重点来了:一定要记住error事件不冒泡。

相关的知识点:jquery的ready方法、$("img").error()、img的complete属性、插件imagesLoaded、事件委托、事件捕获和图片预加载的方法等

1. 图片加载失败替换为默认图片

1.1 给图片绑定error事件

当图片加载失败时会触发error事件

$("img").on("error", function () {
  $(this).attr("src", "../img/img.jpg");
});
  • 不建议事件事件属性onerror,你懂的~O.o
  • 如果是动态添加的图片,还要重新绑定这个事件。像click事件这些可以利用事件委托的方式,但是事件委托是利用事件冒泡的思路来做的,而error事件不支持冒泡
  • 不建议在ready方法中给img绑定error事件,可能img加载图片失败时,img并没有绑定error事件,就会导致没有替换为默认图片

1.2 利用complete属性来判断

当图片加载失败时complete属性值为false,加载成功时true

$("img").each(function () {

  if (!this.complete || (typeof this.naturalWidth == "undefined" && this.naturalWidth == 0) || !this.src) {
    $(this).attr("src", "../img/img.jpg");
  }
});
  • 如果是动态添加的图片,还是要重新判断的
  • 可以在一点时间后再来判断,不然刚新增图片,图片资源可能还没有请求完就用这个方式来判断会有问题的
  • HTML 5中,新增了两个用来判断图片的宽度和高度的属性,分别为 naturalWidth 和naturalHeight属性(必须在图片完全下载到客户端浏览器才能判断)
  • img的onreadystatechange这个属性不讨论,有浏览器差异性

1.3 利用error事件捕获来处理(全局判断,动态添加的元素也可以-最优解)

document.addEventListener("error", function (e) {

  var elem = e.target;
  if (elem.tagName.toLowerCase() == 'img') {
    elem.src = "../img/img.jpg";
  }
}, true);

可以监听到动态产生的img标签

1.4 利用插件imagesLoaded提供的方法来处理

imagesLoaded主要用来在手机端瀑布流方式来加载图片,也可以用来处理图片加载失败替换为默认图片

// 用的是jQuery的deferred来实现的
$('img').imagesLoaded()
    .always(function (instance) { // always事件,在所有图片都加载完成(成功与否不论)时触发
      console.log('all images loaded');
    })
    .done(function (instance) { // done事件,在所有图片都加载成功时触发
      console.log('all images successfully loaded');
    })
    .fail(function (instance) { // fail事件,在所有图片都加载完成,并且至少有一张图片加载失败时触发
      console.log('all images loaded, at least one is broken');
    })
    .progress(function (instance, image) { // progress事件,在每一张图片加载完成时都触发一次
      var result = image.isLoaded ? 'loaded' : 'broken'; // 判断当前图片加载成功与否
      image.img.src = image.isLoaded ? image.img.src : "../img/img.jpg";
      console.log('image is ' + result + ' for ' + image.img.src);
    });

如果是动态添加的图片,还是要重新判断的

2. 图片预加载的方法

// 实现预加载图片,传入的参数是数组,数组的每一项为该图片的地址
function preloadimages(arr) {
  var newimages = [];
  var arr = (typeof arr != "object") ? [arr] : arr; // 确保参数总是数组
  for (var i = 0,len = arr.length; i < len; i++) {
    newimages[i] = new Image();
    newimages[i].src = arr[i];
  }
}

总结

以上所述是小编给大家介绍的jQuery图片加载失败替换默认图片方法汇总,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery实现图片上传前本地预览
Apr 28 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
jquery animate动画持续运动的实例
Nov 29 #jQuery
JQuery 又谈ajax局部刷新
Nov 27 #jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 #jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 #jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 #jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 #jQuery
You might like
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP实现简易blog的制作
2016/10/24 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
Display SQL Server Login Mode
2007/06/21 Javascript
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
Python 绘图和可视化详细介绍
2017/02/11 Python
python 连接sqlite及简单操作
2017/06/30 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Python any()函数的使用方法
2019/10/28 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Python实现括号匹配方法详解
2020/02/10 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
节能宣传周活动总结
2014/05/08 职场文书
软件售后服务方案
2014/05/29 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
联谊活动总结范文
2015/05/09 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript