jQuery 如何处理图片加载失败问题? 下面本篇文章给大家介绍一下 jQuery 图片加载失败替换默认图片的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
jQuery 图片加载失败替换默认图片的方法
重点来了: 一定要记住 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];
- }
- }
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17573.html