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 ...
随机推荐
- spark RDD 的基本操作
好记性不如烂笔头,分享一下 Spark是一个计算框架,是对mapreduce计算框架的改进,mapreduce计算框架是基于键值对也就是map的形式,之所以使用键值对是人们发现世界上大部分计算都可以使 ...
- 泛型中的<Object>并不是像以前那样有继承关系的,也就是说List<Object>和List<String>是毫无关系的
泛型中的<Object>并不是像以前那样有继承关系的,也就是说List<Object>和List<String>是毫无关系的
- VUE生命周期demo
<!DOCTYPE html> <html> <head> <title></title> <script typ ...
- kkfileview v2.0 发布,文件在线预览项目方案
kkfileview文件在线预览 此项目为文件文档在线预览项目解决方案,项目使用流行的spring boot搭建,易上手和部署,部署好后可以独立提供预览服务,使用http接口访问,不需要和应用集成,具 ...
- leetcode241 为运算表达式设计优先级
class Solution(object): def diffWaysToCompute(self, input): """ :type input: str :rty ...
- dvm 的进程和 Linux 的进程, 应用程序的进程是否为同一个概念?
dvm 指 dalvik 的虚拟机. 每一个 Android 应用程序都拥有一个独立的 Dalvik 虚拟机实例,应用程序都在它自己的进程中运行.而每一个 dvm 都是在 Linux 中的一个进程,所 ...
- 写10个简单的 linux 命令?
mkdir 创建文件夹rmdir 删除文件夹rm 删除文件 mv 移动文件cp 拷贝文件cat 查看文件 tail 查看文件尾部more 分页查看文件cd 切换当前目录 ls 列出文件清单reboot ...
- redis-主从复制、读写分离
1.为什么要主从复制(一主多仆),读写分离:redis在作为缓存的时候,随着数据的不断增加,是有可能出现宕机的,这时候就出现了“单点故障”,解决方案就是进行主从复制,读写分离. 原理图:Master是 ...
- 阶段3 2.Spring_07.银行转账案例_2 案例中添加转账方法并演示事务问题
使用xmlioc这个项目进行完善. 创建一个新的工程把之前的代码都复制过来. 复制pom.xml内的依赖项 java下的com包复制过来. 配置文件复制过来 测试类固执过来 内容进行删减 测试类的方法 ...
- jmeter响应数据Unicode编码转换为汉字
2018-07-09 10:24:34 每次用jmeter做接口测试时,响应信息中文总是显示Unicode编码格式,每次都要在网上寻找这一段转换的代码,但是我发现在网上找这段代码有点麻烦,像我 ...