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 remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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 作用域解析运算符(::)
2010/07/27 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python列表(list)常用操作方法小结
2015/02/02 Python
Python生成随机密码的方法
2017/06/16 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
python实现简单学生信息管理系统
2020/04/09 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
企业行政文员岗位职责
2013/12/03 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
聚美优品励志广告词
2014/03/14 职场文书
小学生暑假生活总结
2015/07/13 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
Go语言编译原理之源码调试
2022/08/05 Golang