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 ...
随机推荐
- echarts 有关饼形图和map的使用技巧1(饼图)
http://blog.csdn.net/yhn1121/article/details/52041742 先上个链接,百度无意间搜到的,写得比我全面,可以直接飞去看它: 之前写网页用过echarts ...
- 整合spring之后,struts2里面的自定义拦截器的invocation.invoke()总是返回input
这个真的是整死我了,还好看见了一篇博客提示了我, 解决方法: 在spring的bean配置中我没有设置action的作用域为prototype,也就是多例的,如果不设置则就会是默认的singleton ...
- Unknown tag (s:property)的原因
今天在做struts2的练习,然后在jsp页面我使用<s:property value="name"/>竟然报错, 然后网上走了下,恍然大悟,我原来没有在jsp页面里面 ...
- C++入门经典-例5.1-输出变量的指针
1:代码如下: // 5.1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...
- dubbo源码阅读笔记-如何引用远程服务,变成invoker
1 消费端如何通过注册中心获取远程服务的invoker? RegistryDirectory.subscribe从注册中心中获取provider的url,通过DubboProtocol的refer方法 ...
- 关于虚拟机中Linux系统无法上网之后的解决方案
我刚刚安装好虚拟机上的Linux的时候,宿主机网络正常,但虚拟机中虽然显示网络连接正常,但无法上网,因此我打开了网络设置 这是默认设置,但上不了网,而按照网上的查找结果,选择NAT是没错的,但仅限于w ...
- 后盾网lavarel视频项目---模型一对多关联简单实例
后盾网lavarel视频项目---模型一对多关联简单实例 一.总结 一句话总结: 在模型中定义一个方法来设置一对多关联:return $this->hasMany(Video::class); ...
- node 常用模块
像在服务器上的操作,我们只要 require 引入的模块,只要不是 nodejs 中的模块,我们的下载环境都是开发环境 配置自动化:引用插件 nodemon 下载:npm i nodemon -g ...
- leetcode-easy-array-136. Single Number
mycode 75.80% class Solution(object): def singleNumber(self, nums): """ :type nums: ...
- Learn The Architecture Memory Management 译文
1.概述 本文档介绍了ARMv8-A架构内存管理的关键——内存地址转换,包括虚拟地址(VA)到物理地址(PA)的转换.页表(或称地址转换表)格式以及TLBs(Translation Lookaside ...