转:http://www.daqianduan.com/6419.html

试想,如果模板中有图片,此时如何判断图片是否加载完成?

在此之前来了解一下jquery的ready与window.onload的区别,ready只是dom结构加载完毕,便视为加载完成。(此时图片没有加载完毕),onload是指dom的生成和资源完全加载(比如flash、图片)出来后才执行。接下来回到正题,先从单张图片说起。

(1)、单张图片(图片在文档中)

// HTML
<img id='xiu' src="http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg">   //js
$(document).ready(function(){ //jquery
$('#xiu').load(function(){
// 加载完成
}); //原生 onload
var xiu = document.getElementById('xiu')
xiu.onload = xiu.onreadystatechange = function(){
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
// 加载完成
}
}; })

注:
1、IE8及以下版本不支持onload事件,但支持onreadystatechange事件;
2、readyState是onreadystatechange事件的一个状态,值为loaded或complete的时候,表示已经加载完毕。
3、以下内容省略兼容

(2)、单张图片(图片动态生成)

//js
var xiu = new Image()
xiu.src = 'http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg'
xiu.onload = function(){
// 加载完成
}

(3)、单张图片(结合ES6 Promise)

//js
new Promise((resolve, reject)=>{
let xiu = new Image()
xiu.src = 'http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg'
xiu.onload = function(){
// 加载完成
resolve(xiu)
}
}).then((xiu)=>{
//code
})

(4)、多张图片

var img = [],
flag = 0,
mulitImg = [
'http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg',
'http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg',
'http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg',
'http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg'
];
var imgTotal = mulitImg.length;
for(var i = 0 ; i < imgTotal ; i++){
img[i] = new Image()
img[i].src = mulitImg[i]
img[i].onload = function(){
//第i张图片加载完成
flag++
if( flag == imgTotal ){
//全部加载完成
}
}
}

(5)、多张图片(结合ES6 Promise.all())

  let mulitImg = [
'http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg',
'http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg',
'http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg',
'http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg'
];
let promiseAll = [], img = [], imgTotal = mulitImg.length;
for(let i = 0 ; i < imgTotal ; i++){
promiseAll[i] = new Promise((resolve, reject)=>{
img[i] = new Image()
img[i].src = mulitImg[i]
img[i].onload = function(){
//第i张加载完成
resolve(img[i])
}
})
}
Promise.all(promiseAll).then((img)=>{
//全部加载完成
})

JS判断单、多张图片加载完成的更多相关文章

  1. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  2. JS 判断滚动底部并加载更多效果。。。。。。。。。

    JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...

  3. JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)

    //平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...

  4. js判断flash文件是否加载完毕

    轮询判断加载进度 img的加载完成有onload方法,一直不知道该怎么判断swf文件是否加载完毕了? 在应用中使用了轮询判断加载进度值PercentLoaded是否达到100,经测试,可以达到效果. ...

  5. js 判断是什么浏览器加载页面

    一.Navigator 属性: 1)appcodeName  返回浏览器代码名 2)appminorVersion  返回浏览器次级版本 3)appname  返回浏览器名称 4)browserLan ...

  6. js 多张图片加载 环形进度条

    css 部分使用 svg 绘制环形 svg{width:100px; height: 100px; margin:15% auto 25%; box-sizing:border-box; displa ...

  7. 如何使用echo.js实现图片的懒加载(整理)

    如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...

  8. 常用js,css文件统一加载方法,并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  9. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

随机推荐

  1. Python Day24

    AJAX 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作 ...

  2. luoguP4931 情侣?给我烧了!(加强版)

    luogu 普通版题解:https://www.cnblogs.com/lcxer/p/10876856.html 在普通版里,我们考虑对于\(n\)对情侣,恰好\(k\)对是和谐的方案数是 \[ a ...

  3. JavaScript for impatient programmers

    参考 作者发布的在线HTML版本(包含大部分主要章节,只缺少四个额外章节)——https://exploringjs.com/impatient-js/toc.html 作者的博客——http://2 ...

  4. spring boot war

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  5. springboot 简单使用shiro登录

    首先引入需要的pom <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shir ...

  6. EIGRP-7-可靠传输协议

    可靠传输协议(RTP,Reliable Transport Protocol)负责管理ElGRP数据包的发送和接收.可靠传输意味着传输是有保障的,并且数据包会被按顺序发送.这种传输效果是依靠Cisco ...

  7. Hive MetaStore Upgrade

    # cd $HIVE_HOME/scripts/metastore/upgrade/mysql [Dev root @ sd-9c1f-2eac /usr/local/src/apache-hive- ...

  8. python_魔法方法(二):算术运算

    python2.2之后,对类和类型做了同意,将int().float().str().list().touple()这些BIF转换为工厂函数 >>> type(len) <cl ...

  9. (转)Linux: dirname、basename命令详解

    Linux: dirname.basename命令详解 原文:http://blog.sina.com.cn/s/blog_3f63916f010143vo.html 一.dirname指令 1.功能 ...

  10. 将本地代码添加到github

    首先在github上创建一个仓库. 第一步:建立本地仓库 git init 关联远程仓库 git remote add origin https://github.com/tshua/***.git ...