1. 首页
  2. 技术
  3. 前端

JS判断单、多张图片加载完成

JS判断单、多张图片加载完成

2017-08-13
分类:JavaScript / 技巧资源
阅读(39160)
评论(36)

在实际的运用中有这样一种场景,某资源加载完成后再执行某个操作,例如在做导出时,后端通过打开模板页生成PDF,并返回下载地址。这时前后端通常需要约定一个flag,用以标识模板准备就绪,可以生成PDF了。

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

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

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

// HTML
<img id='xiu' src="https://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)=>{
     //全部加载完成
 })

AD:
【专业网站开发】
7年网站开发经验 / 高端大气用户体验 / 全设备自适应兼容 / 免费靠谱工单售后
赞(202) 未经允许不得转载:
大前端 »
JS判断单、多张图片加载完成
分享到:








更多
(
0
) 标签:
JS判断
图片加载
JS判断单、多张图片加载完成

cc

大前端管理员,一个正在成长的前端开发者。
上一篇
图表库ECharts的使用

下一篇
东莞微餐时代招聘前端开发(7K-18K)

相关推荐

评论 36

JS判断单、多张图片加载完成

取消

有人回复时邮件通知我

提交评论

  • 昵称昵称 (必填)
  • 邮箱邮箱 (必填)
  • 网址网址
  1. #35 JS判断单、多张图片加载完成

    nb

    solfKwolf3周前 (07-25) 回复

  2. #34 JS判断单、多张图片加载完成

    0.svafv

    hh1个月前 (07-07) 回复

  3. #33 JS判断单、多张图片加载完成

    onload事件绑定应该再src赋值前

    18116个月前 (02-12) 回复

  4. #32 JS判断单、多张图片加载完成

    一起学习前端交流的html5技术交流群 250777811 群文件上传了很多的项目实战,大家可以练练手

    web前端12个月前 (08-24) 回复

  5. #31 JS判断单、多张图片加载完成

    不错

    web前端12个月前 (08-24) 回复

  6. #30 JS判断单、多张图片加载完成

    留言看看

    审美12个月前 (08-23) 回复

  7. #29 JS判断单、多张图片加载完成

    隨便留言嗎?

    wase1年前 (2017-08-11) 回复

  8. #28 JS判断单、多张图片加载完成

    多张页面结合网站统计

    wase1年前 (2017-08-10) 回复

  9. #27 JS判断单、多张图片加载完成

    艳照门图片,日本片直接访问 lanvbo.com/xinggan/index.html

    123211年前 (2017-07-19) 回复

  10. #26 JS判断单、多张图片加载完成

    daanjia.com lanvbo.com

    741年前 (2017-07-17) 回复

  11. #25 JS判断单、多张图片加载完成

    11111

    21211年前 (2017-07-16) 回复

  12. #24 JS判断单、多张图片加载完成

    daanjia.com lanvbo.com

    9451年前 (2017-07-16) 回复

  13. #23 JS判断单、多张图片加载完成

    答案家 daanjia.com 美女图片 lanvbo.com

    111年前 (2017-07-16) 回复

  14. #22 JS判断单、多张图片加载完成

    lanvbo.com

    111年前 (2017-07-16) 回复

  15. #21 JS判断单、多张图片加载完成

    www .lanvbo.com

    111年前 (2017-07-16) 回复

  16. #20 JS判断单、多张图片加载完成

    www

    111年前 (2017-07-16) 回复

  17. #19 JS判断单、多张图片加载完成

    aaaaaaaaaa222

    111年前 (2017-07-16) 回复

  18. #18 JS判断单、多张图片加载完成

    aaaaaaaaaa

    111年前 (2017-07-16) 回复

  19. #17 JS判断单、多张图片加载完成

    不错

    hi my1年前 (2017-07-16) 回复

  20. #16 JS判断单、多张图片加载完成

    辣女啵

    111年前 (2017-07-11) 回复

  21. #15 JS判断单、多张图片加载完成

    11111

    111年前 (2017-07-11) 回复

  22. #14 JS判断单、多张图片加载完成

    测试头像

    2131年前 (2017-07-01) 回复

  23. #13 JS判断单、多张图片加载完成

    发的杀

    2131年前 (2017-07-01) 回复

  24. #12 JS判断单、多张图片加载完成

    haha

    1年前 (2017-06-29) 回复

  25. #11 JS判断单、多张图片加载完成

    深圳前端技术高级群622293272

    jjgaga1年前 (2017-06-27) 回复

  26. #10 JS判断单、多张图片加载完成

    头像好慢啊

    cuihaifeng1年前 (2017-06-07) 回复

  27. #9 JS判断单、多张图片加载完成

    测试评论

    测试1年前 (2017-06-06) 回复

  28. #8 JS判断单、多张图片加载完成

    不错。我的新主题,刚好用得上~

    自然志1年前 (2017-05-30) 回复

  29. #7 JS判断单、多张图片加载完成

    aa

    1年前 (2017-05-28) 回复

  30. #6 JS判断单、多张图片加载完成

    呵呵

    1年前 (2017-05-27) 回复

  31. #5 JS判断单、多张图片加载完成

    12345678

    ttt1年前 (2017-05-08) 回复

  32. #4 JS判断单、多张图片加载完成

    这么牛逼的文章,【请原谅菜鸟这样说】,我居然是第3720人读的,以后要争取第一个人,读这些牛叉的文章【本宝宝暂时用不到】,我相信,以后会有机会用到的

    点不小1年前 (2017-05-03) 回复

  33. #3 JS判断单、多张图片加载完成

    文章很赞,邀请来深圳前端高级群,只接收有经验和前端技术爱好者,纯粹研究技术,群号622293272

    dolio1年前 (2017-04-27) 回复

  34. #2 JS判断单、多张图片加载完成

    第4个 loaded 会报错呢,未定义

    1年前 (2017-04-13) 回复

  35. #1 JS判断单、多张图片加载完成

    1

    11213@qq.com1年前 (2017-04-11) 回复

    • JS判断单、多张图片加载完成

      哈哈

      1年前 (2017-05-27) 回复

原创文章,作者:cc,如若转载,请注明出处:https://www.zengqueling.com/js%e5%88%a4%e6%96%ad%e5%8d%95%e3%80%81%e5%a4%9a%e5%bc%a0%e5%9b%be%e7%89%87%e5%8a%a0%e8%bd%bd%e5%ae%8c%e6%88%90/

联系我们

15602395067

在线咨询:点击这里给我发消息

邮件:eden7@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code