重点来了:一定要记住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 - 处理图片加载失败!的更多相关文章

  1. jQuery Mobile 脚本加载问题

    刚开始使用jQuery Mobile,发现很多问题需要重新考虑,比如脚本加载问题. 在普通html中,如果a.html中有链接到b.html,b.html中有类似代码: $(document).rea ...

  2. JQuery Mobile页面加载处理

    在弄移动Web时采用了JQueryMobile框架. 奇怪的是 在使用页面加载 时 事件无效 我尝试了两种方法: $(document).ready(function(){ //do events } ...

  3. jquery mobile动态加载数据后无法渲染

    引自:http://blog.sina.com.cn/s/blog_025270e901016lst.html jquery mobile在动态添加html之后无法渲染控件,无法转换控件的办法! jq ...

  4. jquery mobile 动态加载标签时,无法正常展示样式

    原因 在chrome中审查元素,发现其增加了很多没有直接写在页面上的标签和样式.页面标签首先经过jquery.mobile-1.4.5.min.js的处理,添加了许多标签,然后再用css布局 解决方案 ...

  5. 当h5页面图片加载失败后,给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

  6. 关于 mobile sui a外链 老是出现加载失败的解决办法

    mobile sui 框架里面的a本身都绑了了一个ajax方法,ajax只能处理同域,跨域就会出现问题 ,所以mobile sui 中的a如果是外链的话就会出现加载失败的提示,这种明显的bug,让用户 ...

  7. RequireJS 主入口加载模块经常会加载失败的问题

    在接入requirejs时,在main入口遇到了这样的问题,使用jquery,刷新10次页面会有3-4次加载失败,找不到$符号等等 require.config({ 'baseUrl': './mod ...

  8. js解决img标签加载失败显示默认图片

    问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...

  9. js 图片加载失败处理方法

    在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...

随机推荐

  1. python之Flask框架

    一.简单的Flask框架 1)flask简介 Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序. 这个 wdb 应用程序可以使一些 we ...

  2. dblink(转)

    oracle在进行跨库访问时,可以通过创建dblink实现,今天就简单的介绍下如果创建dblink,以及通过dblink完成插入.修改.删除等操作 首先了解下环境:在tnsnames.ora中配置两个 ...

  3. 44、WebStrom下载和破解

    WebStrom下载地址: http://www.pc6.com/mac/112553.html WebStrom 2017激活破解(http://blog.csdn.net/it_talk/arti ...

  4. 【转】Centos7下Yum安装PHP5.5,5.6,7.0

    默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 ...

  5. Devops 到底是什么?(转)

    出处:https://www.cnblogs.com/servicehot/p/6510199.html 过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOp ...

  6. identify.class.php<======>token加密方法

    class Identify { static private $cert = "1111111"; static public function writeSecret($mob ...

  7. java学习3创建学生属性:学号、姓名、电话 完全实现对象集合的增删改查。(控制台来做)

    首先创建一个student类其中包括get,set与构造函数 /** * */package work2; /** * @author Administrator * */public final c ...

  8. mybatis 时间区间比较

    直接上代码,此时数据库使用的Date类型: <if test="minCreateTime != null and minCreateTime != ''"> < ...

  9. MySQL 安装与使用(三)

    操作系统:CentOS release 5.10 (Final) MySQL版本:5.1.72-community 占位学习与编辑中……

  10. Using Spring.net in console application

    Download Spring.net in http://www.springframework.net/ Install Spring.NET.exe Create a console appli ...