js判断图片是否加载成功
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:;padding:;}
.main{width:800px;margin:50px auto;border:1px solid #ccc;}
.main li{%;}
.main ul{overflow:hidden;}
.main li img{width:%;}
li{list-style: none;}
</style>
<script src="src.js"></script>
</head>
<body>
<div class="main">
<ul>
<li>
<img src="https://img13.360buyimg.com/mobilecms/s80x80_jfs/t3607/53/1645824653/56317/14fbe587/582eb3d7N41fdab12.jpg!q90.webp" onload="imgObj('https://img14.360buyimg.com/n4/s130x130_jfs/t3358/84/1745747532/247590/ebbfc20e/58340651N16910ec9.jpg!q90.webp')">
</li>
</ul>
</div>
</body>
</html>
function imgObj(src){
var _src = src+'?datetime='+new Date().getTime();
/**
* 加载图片，直到加载完成后才调用回调函数
* @param url 后面读取图片流的url
* @param callback 回调函数
*/
function loadImage(url, callback) {
var img = new Image();
img.src = url;
var timer = setInterval(function() {
if (img.complete) {
callback(img);
clearInterval(timer);
}
}, );
}
/**
*图片加载完成
*/
function testFun(_ele){
console.log('into testFun');
}
loadImage(_src,testFun);
}
js判断图片是否加载成功的更多相关文章
- JS判断图片是否加载完成三种方式
1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...
- js 判断图片是否加载完成(使用 onload 事件)
我们在写 jquery 的时候一般都会写 $(document).ready,加载完成事件还有一个就是 onload onload 与 ready 的区别是: 1.ready 是 DOM 加载完成的事 ...
- js判断图片是否加载完毕
附件: https://www.jb51.net/article/102385.htm 问题: .offset().top和$(window).scrollTop()每次刷新页面后滚动的值有时候会不 ...
- js判断图片是否加载完成
var img = new Image(); //新建一个图片对象:img.src = ...; //图片地址是你准备要加载的地址:if(img.complete){ //表示图片已经加载完成}
- 关于JS判断图片是否加载完成且获取图片宽度的方法
做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处 ...
- js 判断图片是否加载完成
1.根据url来加载图片: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /** * 加载图片,直到加载完成后才调用回调函数 * @param url 后面读取图片流的u ...
- JS判断图片是否加载完成 背景图404 快到碗里来
面对这个问题 我最多做到表面笑嘻嘻 …… 真不知道测试怎么那么…… 啥都能给你测出来 有的没的都能给你测出来 算了算了 谁让本仙女本精灵本可爱温柔大方善解人意呢 …呵呵呵 ————————————正 ...
- 判断img图片是否加载成功
上班之余,记录一下工作中遇到的有趣问题... 事情是这样的...在做一个内嵌H5的app时,有一个“个人名片”页面...要求:如果后台接口有给头像的图片链接就用他们给的,如果没给,前端给个默认头像.. ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
随机推荐
- Qt学习1
Action 的用法 首先在头文件的 private 中加: 1 2 3 QMenu *fileMenu; QMenu *editMenu; QMenu *helpMenu; 1 2 3 4 5 6 ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室 实战系列（不断更新中）
项目简介 利用ASP.NET SignalR技术与Layim前端im框架实现的一个简单的web聊天室,包括单聊,群聊,加好友,加群,好友搜索,管理,群组管理,好友权限设置等功能.涉及技术: Elast ...
- GridView使用自带分页功能时分页方式及样式PagerStyle
// 转向地址:http://www.bubuko.com/infodetail-412562.html GridView分页,使用自带分页功能,类似下面样式: 在aspx页面中,GridView上的 ...
- C#：安装Windows服务，动态指定服务名及描述
Installer.cs>> public Installer() { InitializeComponent(); /* 服务未注册前,System.Configuration.Conf ...
- perl读取文件
1)文件读取的3中方法 按行读,存入标量 while (<FILE>) { print; } 按行读,存入数组 @array = <FILE>; 读入整个文件 ,存入标量 ...
- cg资讯网址
cg教程下载: http://cgpeers.com http://cgpersia.com http://bbs.ideasr.com/forum-328-1.html http://bbs.ide ...
- 子类实例化和Super
在子类的构造函数当中,必须调用父类的构造函数,通过super的参数个数和类型来决定调用父类哪一个构造函数. class Student extends Person{ Student(){ super ...
- SpringMVC 中获取所有的路由配置。
ApplicationContext context = TMSContextLookup.getApplicationContext(); String[] controllerList = con ...
- ConfigParser.MissingSectionHeaderError: File contains no section headers.
今天使用ConfigParser解析一个ini文件,报出如下错误: config.read(logFile) File "C:\Python26\lib\ConfigParser.py&qu ...
- ios xmpp开发应用后台模式接收聊天信息处理方案
ios xmpp开发应用后台模式接收聊天信息 最近在使用xmppframwork来实现一个聊天应用,碰到了一个问题,应用进入后台以后,就接收不到消息了: 怎么样才能使应用被切到后台时,应用中的网络连接 ...