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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery插件懒加载的示例
Oct 24 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
生成静态页面的PHP类
2006/07/15 PHP
php使用curl访问https示例分享
2014/01/17 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php实现的SESSION类
2014/12/02 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
Python实现在线程里运行scrapy的方法
2015/04/07 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
2014升学宴答谢词
2014/01/26 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
班班通项目实施方案
2014/02/25 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL