JQuery Mobile - 处理图片加载失败!
重点来了:一定要记住error事件不冒泡(如果要用js的方法替换默认出错图片,记得把img的alt属性去掉)。
相关的知识点: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];
}
}
3. 相关知识
原文:
https://www.jianshu.com/p/aee98148ad57
JQuery Mobile - 处理图片加载失败!的更多相关文章
- jQuery Mobile 脚本加载问题
刚开始使用jQuery Mobile,发现很多问题需要重新考虑,比如脚本加载问题. 在普通html中,如果a.html中有链接到b.html,b.html中有类似代码: $(document).rea ...
- JQuery Mobile页面加载处理
在弄移动Web时采用了JQueryMobile框架. 奇怪的是 在使用页面加载 时 事件无效 我尝试了两种方法: $(document).ready(function(){ //do events } ...
- jquery mobile动态加载数据后无法渲染
引自:http://blog.sina.com.cn/s/blog_025270e901016lst.html jquery mobile在动态添加html之后无法渲染控件,无法转换控件的办法! jq ...
- jquery mobile 动态加载标签时,无法正常展示样式
原因 在chrome中审查元素,发现其增加了很多没有直接写在页面上的标签和样式.页面标签首先经过jquery.mobile-1.4.5.min.js的处理,添加了许多标签,然后再用css布局 解决方案 ...
- 当h5页面图片加载失败后,给定一个默认图
本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...
- 关于 mobile sui a外链 老是出现加载失败的解决办法
mobile sui 框架里面的a本身都绑了了一个ajax方法,ajax只能处理同域,跨域就会出现问题 ,所以mobile sui 中的a如果是外链的话就会出现加载失败的提示,这种明显的bug,让用户 ...
- RequireJS 主入口加载模块经常会加载失败的问题
在接入requirejs时,在main入口遇到了这样的问题,使用jquery,刷新10次页面会有3-4次加载失败,找不到$符号等等 require.config({ 'baseUrl': './mod ...
- js解决img标签加载失败显示默认图片
问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...
- js 图片加载失败处理方法
在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...
随机推荐
- myeclipse 上安装 Maven3
myeclipse 上安装 Maven3 环境准备: JDK 1.6 Maven 3.0.4 myeclipse 8.6.1 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Mav ...
- 常见CSS
.login_top_bg { background-image: url(/pcssc/images/login/login-top-bg.gif); background-repeat: repe ...
- 华为QOS原理及配置
http://www.tudou.com/programs/view/GWCiHfWC9FI/ FLASH : http://www.tudou.com/v/GWCiHfWC9FI/&reso ...
- java中排序函数sort()使用,Arrays.sort()和Collections.sort()
Java中常用的数组或集合排序的方法有两个,一个是java.util.Arrays中的静态方法Arrays.sort(),还有一个是java.util.Collections中的静态方法的Collec ...
- poj--2299(树状数组+离散化)
一.离散化: https://www.cnblogs.com/2018zxy/p/10104393.html 二.逆序数 AC代码: #include<iostream> #include ...
- Tomcat架构解析(二)-----Connector、Tomcat启动过程以及Server的创建过程
Connector用于跟客户端建立连接,获取客户端的Socket,交由Container处理.需要解决的问题有监听.协议以及处理器映射等等. 一.Connector设计 Connector要实现的 ...
- vue 开发系列(五) 调用原生API
概要 我们在开发手机端程序的时候了,我们经常需要使用到拍照,二维码的功能.数字天堂公司提供了大量的原生API支持. http://www.html5plus.org/doc/ 实现 1.在hbuild ...
- Java的函数重载必须满足的条件
1.函数名相同 2.参数个数不同或者参数类型不同 3.函数重载和返回值类型无关 //函数的重载 public static void get() { System.out.println(" ...
- C++之输出100-200内的素数
素数(质数) 除了1和它本身以外不再被其他的除数整除. // 输出100--200内的素数 #include<iostream> using namespace std; int m ...
- UVa 11021 Tribles (概率DP + 组合数学)
题意:有 k 只小鸟,每只都只能活一天,但是每只都可以生出一些新的小鸟,生出 i 个小鸟的概率是 Pi,问你 m 天所有的小鸟都死亡的概率是多少. 析:先考虑只有一只小鸟,dp[i] 表示 i 天全部 ...