js 判断图片和视频是否加载成功
图片:
失败:
// 方法 1:更换图片地址
$('img').error(function(){
$(this).attr('src', '加载失败.png');
});
// 方法 2:隐藏它
$("img").error(function(){
$(this).hide();
});
成功
//jquery的方式
$("#imageId").load(function(){
alert("加载完成!");
});
js:
document.getElementById("img2").onload=function(){}
视频:
h5的video标签 的oncanplaythrough方法可以判断视频加载成功与否
<a href="javascript:void(0)" title="点击查看视频">
<video id="${video.id}" src="${videoPath}${video.fFileName}" onclick="big(this.src);"
height=30 width=30 oncanplaythrough="myFunction(this.id)"/>
</a>
function myFunction(id) {
$("#"+id+"a").show();
}
img标签有个onerror方法可以直接判断图片是否加载成功:
为防止onerror方法死循环应该这么写:
<img alt="" xid="image1" src="xxxx" onerror="this.onerror=null;this.src='./knowledge/DefaultNews.png'"></img></div>
js 判断图片和视频是否加载成功的更多相关文章
- JS判断单、多张图片加载完成
转:http://www.daqianduan.com/6419.html 试想,如果模板中有图片,此时如何判断图片是否加载完成? 在此之前来了解一下jquery的ready与window.onloa ...
- js-页面需展示大量图片时,采用lyz.delayLoading.min.js,图片在屏幕时加载显示
本文本内容拷贝至:https://blog.csdn.net/xuanwuziyou/article/details/48199123 当一个网页中有大量图片时,浏览器会逐个去下载这些图片,等全部下载 ...
- swiper.js 多图片页面的懒加载lazyLoading
swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效.需 ...
- JS判断当前DOM树是否加载完毕
/** * @function Monitor whether the document tree is loaded. * @param fn */function domReady(fn) { i ...
- JS判断图片是否加载完成三种方式
1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...
- 判断img图片是否加载成功
上班之余,记录一下工作中遇到的有趣问题... 事情是这样的...在做一个内嵌H5的app时,有一个“个人名片”页面...要求:如果后台接口有给头像的图片链接就用他们给的,如果没给,前端给个默认头像.. ...
- 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏
目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...
- js实现类型jq的dom加载完成
有时候我们只想在 dom 加载完成后运行 js ,而不是等所有图片加载完成.所以不需要 onload , onload 会加载图片等其他媒体.很消耗时间. 原:http://blog.csdn.net ...
随机推荐
- Linux系统下Java开发环境的配置(未完...)
1.查看jdk版本 java -version 2.将下载好的jdk放在/usr/lib/jvm里(其中jvm是自己起的名) sudo mv jdk1.8.0_111 /usr/lib/jvm ...
- TreeMap元素必须实现Comparable接口
纠正一下,TreeMap实现一定顺序是通过Comparable接口的,而他实现元素不重复也是完全通过compareTo,而不是hashCode和equals,因为debug不会走到hashCode和e ...
- git 更改远程仓库地址,强行推送远程仓库
强行推送远程仓库 #把一个现有的工程拷贝一份 #去掉远程仓库关联 git remote rm origin #添加远程仓库关联 git remote add origin http://xxx.git ...
- 套接字之recvmsg系统调用
recvmsg系统调用允许用户指定msghdr结构来接收数据,可以将数据接收到多个缓冲区中,并且可以接收控制信息:接收信息过程与其他接收系统调用核心一致,都是调用传输层的接收函数进行数据接收: SYS ...
- 如何使用EF?
方法1: 新建好项目之后 → 右击类库 → 新建项 → ADO.NET实体数据模型(在Visual C#项中) → 从数据库生成 → 选择你要映射的数据库的数据源(将 『是,在连接字符串中包含敏感数据 ...
- ERROR: Command "python setup.py egg_info" python-nss
[root@localhost ~]# pip install python-nss DEPRECATION: Python 2.7 will reach the end of its life on ...
- flask url_for后没有带端口号
问题描述: 在本地运行flask项目,当运行到下面这句代码时,正常重定向 return redirect(url_for('.script_case')) 但项目布署到服务器之后,代码运行一这句话,却 ...
- Python_元组、字典内建方法详解
目录 目录 前言 软件环境 元组Tuple count 查询一个元素在Tuple中的数量 index 查询元素在Tuple中的索引号 元组的遍历 字典Dictionary 创建一个字典对象 简单的创建 ...
- 阶段3 2.Spring_06.Spring的新注解_3 AnnotationConfigApplicationContext的使用
目前这个配置文件除了导约束就没有其他的内容了. 删除这个bean.xml文件 但是测试类里面还是读取的xml的信息 注解 查看ApplicationContext的 关系图 查看实现类的实现类 之前我 ...
- java:Hibernate框架1(环境搭建,Hibernate.cfg.xml中属性含义,Hibernate常用API对象,HibernteUitl,对象生命周期图,数据对象的三种状态,增删查改)
1.环境搭建: 三个准备+7个步骤 准备1:新建项目并添加hibernate依赖的jar文件 准备2:在classpath下(src目录下)新建hibernate的配置文件:hibernate.cf ...