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来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
随机推荐
- mm/swap
/* * linux/mm/swap.c * * Copyright (C) 1991, 1992 Linus Torvalds */ /* * This file should contain ...
- ASP.NET Razor——Razor 简介
ASP.NET Razor - 标记 Razor 不是一种编程语言.它是服务器端的标记语言. 什么是 Razor? Razor 是一种标记语法,可以让您将基于服务器的代码(Visual Basic 和 ...
- Postgres 9.4 feature highlight: REPLICA IDENTITY and logical replication
Among the many things to say about logical replication features added in PostgreSQL 9.4, REPLICA IDE ...
- win10-golang环境变量设置
安装go 打开环境变量 添加GOPATH 添加到path 检验 在命令指示符下->go version or go env 配置 在F:\GOPATH下放置C:\go\bin->新建pkg ...
- 如何有效的使用C#读取文件
如何有效的使用C#读取文件 你平时是怎么读取文件的?使用流读取.是的没错,C#给我们提供了非常强大的类库(又一次吹捧了.NET一番),里面封装了几乎所有我们可以想到的和我们没有想到的类,流是读取文件 ...
- Openstack Neutron OVS ARP Responder
ARP – Why do we need it? In any environment, be it the physical data-center, your home, or a virtual ...
- Maven进价:Maven构建错误汇总
问题:The method of type must override asuperclass? annotation:@Override的原因 办法:项目右键->build path-> ...
- SQL Server 2008 数据库镜像部署实例之三 配置见证服务器
SQL Server 2008 数据库镜像部署实例之三 配置见证服务器 前面已经完成了镜像数据库的配置,并进行那个了故障转移测试.接下来将部署见证服务器,实现自动故障转移. 一.关于见证服务器 1.若 ...
- 12. Binary Tree Postorder Traversal && Binary Tree Preorder Traversal
详见:剑指 Offer 题目汇总索引:第6题 Binary Tree Postorder Traversal Given a binary tree, return the po ...
- 苹果手机制作gif图片
前一段介绍了一款很好用的在模拟器上录制gif图片的工具licecap(地址:http://www.cnblogs.com/10-19-92/p/5593785.html), 但是licecap不能使用 ...